Изменение цвета элемента hr
Я хочу изменить цвет моей hr
тег с помощью CSS. Код, который я пробовал ниже, похоже, не работает:
hr {
color: #123455;
}
25 ответов
Я думаю, вы должны использовать border-color
вместо color
, Если ваше намерение состоит в том, чтобы изменить цвет линии, произведенной <hr>
- тег.
хотя в комментариях было указано, что если вы измените размер своей линии, граница все равно будет такой же широкой, как вы указали в стилях, и линия будет заполнена цветом по умолчанию (что не является желаемым эффектом большую часть времени). Так что, похоже, в этом случае вам также нужно будет указать background-color
(как @Ibu предложил в своем ответ.)
HTML 5 Boilerplate в таблице стилей по умолчанию указывает следующее правило:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
статьи под названием "12 малоизвестных фактов CSS", опубликованный недавно SitePoint, упоминает, что <hr>
можете установить его border-color
его родители color
если указать hr { border-color: inherit }
.
border-color
работает в Chrome и сафари
background-color
работает в Firefox и Operacolor
работает в IE7+
Я думаю, что это может быть полезно. это был простой селектор CSS.
hr { background-color: red; height: 1px; border: 0; }
hr {
height: 1px;
color: #123455;
background-color: #123455;
border: none;
}
это позволяет изменять высоту при необходимости. Удача. Источник:как стиль HR с CSS
протестировано в ff, opera, ie, chrome и safari
hr{
border-top: 1px solid red;
}
см. скрипку http://jsfiddle.net/HPSjU/
hr {
height:0;
border:0;
border-top:1px solid #083972;
}
это сохранит горизонтальное правило толщиной 1px, а также изменит его цвет
только верхняя граница с цветом достаточно, чтобы сделать линию в другом цвете.
hr{
border-top: 1px solid #ccc;
}
Я считаю, что это наиболее эффективный подход:
<hr style="border-top: 1px solid #ccc; background: transparent;">
или, если вы предпочитаете делать это на всех hr-элементах, напишите это на CSS:
hr {
background-color: transparent;
border-top: 1px solid #ccc;
}
hr
{
background-color: #123455;
}
фон-это тот, который вы должны попытаться изменить
вы также можете работать с цветом границ. я не уверен, что я думаю, что есть проблемы с crossbrowser с этим. вы должны протестировать его в разных браузерах
Если вы используете класс css, то он будет взят всеми тегами "hr", но если вы хотите для конкретного " hr " использовать приведенный ниже код i.e, встроенный css
<hr style="color:#99CC99" />
если он не работает в chrome попробуйте ниже кода:
<hr color="red" />
Я тестирую IE, Firefox и Chrome в мае 2015 года, и это лучше всего работает с текущими версиями. Он центрирует HR и делает его 70% широким:
hr.light {
width:70%;
margin:0 auto;
border:0px none white;
border-top:1px solid lightgrey;
}
<hr class="light" />
вы должны установить ширину границы в 0; он хорошо работает в Firefox и Chrome.
hr {
clear: both;
color: red;
background-color: red;
height: 1px;
border-width: 0;
}
<hr />
This is a test
<hr />
некоторые браузеры использовать color
атрибут и некоторые используют . Чтобы быть в безопасности:
hr{
color: #color;
background-color: #color;
}
прочитав все ответы здесь и увидев описанную сложность, я приступил к небольшому отвлечению для экспериментов с HR. И, вывод состоит в том, что вы можете выбросить большую часть monkeypatched CSS, который вы написали, прочитайте этот маленький букварь и просто используйте эти две строки чистого CSS:
hr {
border-style: solid;
border-color: cornflowerblue; /* or whatever */
}
что это все вам нужно стиль вашего HRs.
- работает кросс-браузер, кросс-устройство, кросс-ОС, кросс-английский канал, кросс-века.
- нет
поскольку у меня нет репутации для комментариев, я дам здесь несколько идей.
если вы хотите переменную высоту css, снимите все границы и дайте цвет фона.
hr{
height:2px;
border:0px;
background:green;
margin:0px;/*sometimes useful*/
}
/*Doesn't work in ie7 and below and in Quirks Mode*/
если вы хотите просто стиль, который вы знаете, что будет работать (пример: заменить границу в элементе:: before для большинства почтовых клиентов или
hr{
height:0px;
border:0px;
border-top:2px solid blue;
margin:0px;/*useful sometimes*/
}
в обоих случаях, если вы установите ширину, она всегда будет иметь размер.
нет необходимости устанавливать display:block;
для этот.
чтобы быть в полной безопасности, вы можете смешивать оба, потому что некоторые браузеры могут запутаться с height:0px;
:
hr{
height:1px;
border:0px;
background:blue;
border-top:1px solid blue;
margin:0px;/*useful sometimes*/
}
С помощью этого метода вы можете быть уверены, что он будет иметь как минимум 2 пикселя в высоту.
это линия больше, но безопасность-это безопасность.
это метод, который вы должны использовать, чтобы быть совместимы практически со всем.
помните: Gmail обнаруживает только встроенный css, и некоторые почтовые клиенты могут не поддерживать фоны или границы. Если один терпит неудачу, у вас все равно будет линия 1px. Лучше, чем ничего.
в худших случаях вы можете попробовать добавить color:blue;
.
в худшем из худших случаев вы можете попробовать использовать <font color="blue"></font>
тег и положить ваши драгоценные <hr/>
тег внутри него. Он унаследует <font></font>
цвет тега.
С помощью этого метода, вы будет хотят сделать так: <hr width="50" align="left"/>
.
пример:
<span>
awhieugfrafgtgtfhjjygfjyjg
<font color="#42B3E5"><hr width="50" align="left"/></font>
</span>
<!--Doesn't work in ie7 and below and in Quirks Mode-->
вот ссылка для вас, чтобы проверить: http://jsfiddle.net/sna2D/
вы можете использовать CSS, чтобы сделать линию с другим цветом, пример будет таким:
border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);
этот код будет отображать вертикальную серую линию.
Ну, я новичок в HTML, CSS и Java, но я пробовал свой путь, который работал для меня во всех браузерах. Я использовал JS вместо CSS который не работает с некоторыми браузерами.
прежде всего я дал id="myHR"
к элементу HR и использовал его в Java-скрипте.
Вот код.
x = document.getElementById("myHR");
y = x.style.width = "600px";
y = x.style.color = "white";
y = x.style.height = "2px";
y = x.style.border = "none";
y = x.style.backgroundColor = "lightgrey";
использование цветов шрифта для изменения горизонтальных правил делает их более гибкими и простыми в использовании.
на color
свойство не наследуется по умолчанию, поэтому в hr необходимо добавить следующее, чтобы разрешить наследование цвета:
/* allow hr to inherit color */
hr { border: 1px solid;}
/* reusable colour modifier */
.fc_-alpha { color: crimson;}
normal hr:
<hr>
hr with <span class="fc_-alpha">colour modifier</span>:
<hr class="fc_-alpha">
вы можете дать <hr noshade>
tag и перейдите в файл css и добавьте:
hr {
border-top:0;
color: #123455;
}
<hr noshade />
This s a test
<hr noshade />
как правило, вы не можете просто установить цвет горизонтальной линии с помощью CSS, как и все остальное. Прежде всего, Internet Explorer нуждается в цвете в вашем CSS, чтобы читать так:
"цвет: #123455"
но Opera и Mozilla нужен цвет в вашем CSS, чтобы читать так:
"фон-цвет: #123455"
Итак, вам нужно будет добавить оба варианта в свой CSS.
Далее, вам нужно будет дать горизонтальную линию некоторые размеры или он будет по умолчанию стандартной высоты, ширины и цвета, установленных вашим браузером. Вот пример кода того, как должен выглядеть ваш CSS, чтобы получить синюю горизонтальную линию.
hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}
или вы можете просто добавить стиль на свою HTML-страницу непосредственно при вставке горизонтальной линии, например:
<hr style="background:#123455" />
надеюсь, что это помогает.