Изменение цвета элемента hr

border-color работает в хром и сафари
background-color работает в Firefox и Opera
color работает в 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
{
color: #f00;
background-color: #f00;
height: 5px;
}

только граница-сверху с цветом достаточно, чтобы сделать линию в другом цвете.

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;
}

фон-это тот, который вы должны попытаться изменить

вы также можете работать с цветом границ. я не уверен, что я думаю, что есть кроссбраузерные проблемы с этим. вы должны проверить его в разных браузерах

Если вы используете класс css, то он будет взят всеми тегами "hr", но если вы хотите для конкретного " hr " использовать приведенный ниже код, т. е. встроенный 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 />

это просто и мой любимый.

<hr style="background-color: #dd3333" />

некоторые браузеры использовать color атрибут и некоторые используют . Чтобы быть в безопасности:

hr{
    color: #color;
    background-color: #color;
}

прочитав все ответы здесь и увидев описанную сложность, я поставил небольшую диверсию для экспериментов с HR. и, вывод заключается в том, что вы можете выбросить большую часть обезьяньего CSS, который вы написали, прочитайте этот маленький букварь и просто используйте эти две строки чистого CSS:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

что это все вам нужно, чтобы стиль ваших часов.

• работает кросс-браузер, кросс-устройство, кросс-ОС, кросс-английский канал, кросс-века.
• нет "я думаю, что это будет работать...", " вы должны иметь в виду Safari / IE..." и т. д.
• нет дополнительных css-нет height,width,background-color,color и т. д. вовлеченный.

просто пуленепробиваемые красочные часы. Это это простой^TM.

---

бонус: чтобы дать HR некоторую высоту H, просто выберите border-width как H/2.

так как у меня нет репутации, чтобы комментировать, я приведу здесь несколько идей.

если вы хотите переменную высоту 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";

1. код работает для старых IE

2. Пробовал Для Многих Цветов

   <hr color="black">
   <hr color="blue">
   

использование цветов шрифта для изменения горизонтальных правил делает их более гибкими и простыми в использовании.

The 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 {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

вы можете дать <hr noshade> тег и перейти к файлу 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" />

надеюсь, что это помогает.

вы можете использовать тег шрифта Например,

<font color="red"><hr></font>