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

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

hr {
    color: #123455;
}

ОТВЕТЫ

Ответ 1

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

Ответ 2

  • border-color работает в Chrome и Safari.
  • background-color работает в Firefox и Opera.
  • color работает в IE7+.

Ответ 3

Я думаю, что это может быть полезно. это был простой селектор CSS.

hr { background-color: red; height: 1px; border: 0; }

Ответ 4

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

Делая это таким образом, вы можете изменить высоту, если это необходимо. Удачи. Источник: Как стилизовать HR с помощью CSS

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

hr
{
color: #f00;
background-color: #f00;
height: 5px;
}

Ответ 9

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

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

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

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

Ответ 10

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

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

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

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

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

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

Ответ 11

если u использует класс css, тогда он будет взят всеми тегами "hr", но если u хочет для определенного "hr" использовать приведенный ниже код i.e, inline css

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

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

<hr color="red" />

Ответ 12

hr
{
  background-color: #123455;
}

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

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

Ответ 13

Вы должны установить border-width в 0; Он отлично работает в Firefox и Chrome.

hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}
<hr />
This is a test
<hr />

Ответ 14

Я тестирую IE, Firefox и Chrome May 2015, и это лучше всего работает с текущими версиями. Он центрирует HR и составляет 70%:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}
<hr class="light" />

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

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

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

С помощью этого метода вы WILL хотите сделать вот так: <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/

Ответ 18

Вы можете использовать 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);

этот код отобразит вертикальную серо-серию.

Ответ 19

Ну, я новичок в 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";

Ответ 20

  • Код работает для более старого IE

  • Пробовали для многих цветов

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

Ответ 21

Вы можете указать тег <hr noshade> и перейти в ваш файл css и добавить:

hr {
    border-top:0;
    color: #123455;
}
<hr noshade />
This s a test
<hr noshade />

Ответ 22

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

Свойство color не наследуется по умолчанию, поэтому для добавления цвета наследование необходимо добавить следующее:

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

Ответ 23

Вы можете сделать это:

hr {
  border: 1px solid red;
}
<hr />
This s a test
<hr />

Ответ 24

Как правило, вы не можете просто установить цвет горизонтальной линии с помощью 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" />

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

Ответ 25

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

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

Ответ 26

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

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