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

Я хочу изменить цвет моего hrтега с помощью CSS. Код, который я пробовал ниже, похоже, не работает:

hr {
    color: #123455;
}

Я думаю, что вы должны использовать 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 и Safari .
• 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

Протестировано в Firefox, Opera, Internet Explorer, Chrome и Safari.

hr {
    border-top: 1px solid red;
}

Посмотри на скрипку .

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

hr {
    border-top: 1px solid #ccc;
}

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

Это позволит сохранить горизонтальное правило толщиной 1 пиксель, а также изменить его цвет.

Я считаю, что это самый эффективный подход:

<hr style="border-top: 1px solid #ccc; background: transparent;">

Или, если вы предпочитаете делать это на всех элементах hr, напишите это на своем CSS:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

час
{
цвет: # f00;
цвет фона: # f00;
высота: 5 пикселей;
}

hr
{
  background-color: #123455;
}

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

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

если вы используете класс css, тогда он будет принят всеми тегами 'hr', но если вы хотите для определенного 'hr', используйте приведенный ниже код, т. е. встроенный CSS

<hr style="color:#99CC99" />

если это не работает в chrome, попробуйте следующий код:

<hr color="red" />

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

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

Это ВСЕ, что вам нужно для стиля ваших HR.

• Работает кросс-браузер, кросс-устройство, кросс-ос, кросс-англ-канал, кросс-эйдж.
• Нет «я думаю, что это сработает ...» , «вам нужно помнить о Safari / IE ...» и т. Д.
• без дополнительной CSS - нет height, width, background-color, colorи т.д. участие.

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

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

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

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

Я тестирую на 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" />

Вы должны установить border-width на 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" />

Вы можете добавить класс начальной загрузки как

<hr class="bg-light" />

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

если вам нужна переменная высота 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 Script.
Вот кодекс.

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">

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

Это 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" />

Надеюсь это поможет.

Я сделал ставку в каждую сторону:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }