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

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

hr {
    color: #123455;
}
Uwe Keim
Редактировал вопрос 28-го декабря 2018 в 1:22
Программирование
html css
17-го июня 2011 в 6:15
37 просмотров
Комментарии к вопросу (6)
Решение

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

Anton Strogonoff
Редактировал ответ 13-го апреля 2019 в 10:32
Комментарии (5)
  • граница-цвет` работает в хром и сафари.
  • цвет фона работает в Firefox и Opera.
  • "цвет" работает в ИЕ7+.
Uwe Keim
Редактировал ответ 28-го декабря 2018 в 1:22
Комментарии (4)

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

hr { background-color: red; height: 1px; border: 0; }
Uwe Keim
Редактировал ответ 28-го декабря 2018 в 1:23
Комментарии (2)
hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

Это позволяет изменять высоту при необходимости. Удачи. Источник: как стиль ч с CSS

Uwe Keim
Редактировал ответ 28-го декабря 2018 в 1:23
Комментарии (0)

Протестирован в Firefox, Опера, Интернет Эксплорер, хром и сафари.

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

[Смотри на скрипке](http://jsfiddle.net/HPSjU/).

Uwe Keim
Редактировал ответ 28-го декабря 2018 в 1:25
Комментарии (0)

Только границы-топ-цвет достаточно, чтобы сделать линии в разные цвета.

hr {
    border-top: 1px solid #ccc;
}
Uwe Keim
Редактировал ответ 28-го декабря 2018 в 1:25
Комментарии (0)
 
hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

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

Комментарии (1)
hr
{
color: #f00;
background-color: #f00;
высота: 5px;
}
Комментарии (0)

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

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

Или если вы предпочитаете делать это на всех HR элементов написать это на тебя Усс:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}
Комментарии (0)

Прочитав все ответы здесь, и видя сложность описано, я поставил на небольшой отвлекающий маневр для экспериментов с HR. И вывод о том, что вы можете выкинуть большую часть monkeypatched CSS вы написали, прочитать эту небольшую [букварь](https://jsfiddle.net/RedDevil/ds20fjo6/) и просто использовать эти две линии на чистом CSS:

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

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

  • Кросс-браузер работает, кросс-устройство, кросс-OS, кросс-англо-канал, кросс-века.
  • Нет "Я думаю, что это будет работать..." и, "Вы должны держать сафари/IE в виду...на" и т. д.
  • нет дополнительные CSS - нет высота, ширина, цвет фона, цвет и т. д. участвует.

Просто пуленепробиваемый красочных часов. Это'ы что просто<суп><малый>ТМ</малый></суп>.

Бонус: дать HR некоторой высоте ч, просто установите для свойства border-ширина как Ч/2.

Комментарии (2)
 
hr
{
  background-color: #123455;
}

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

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

Комментарии (5)

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

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

если это's не работает в Chrome попробовать ниже код:

<hr color="red" />
Комментарии (5)

Вы должны установить границы шириной до 0; это хорошо работает в Firefox и Chrome.

в

в ч { ясное: оба; цвет: красный; цвет фона: красный; высота: 1 пиксель; границы ширина: 0; }

в <ч /> Это тест <ч />

в

Комментарии (0)

Некоторые браузеры используют атрибут "цвет" и некоторые используют фон-цвет атрибута. Чтобы быть безопасным:

hr{
    color: #color;
    background-color: #color;
}
Комментарии (0)

<п>я'м тестирования на IE, Firefox и Chrome май 2015 и это лучше всего работает с текущими версиями. Это центры по кадрам и делает ее широкий 70%:</п>

в

в час.света { ширина:70%; маржа:0 авто; граница:0px ни один белый; границы-топ:1px твердых светло-серый; }

в <ч класс="светлое" и />

в

Комментарии (1)

Это's простое и мое любимое.

<hr style="background-color: #dd3333" />
Комментарии (0)

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

если вы хотите, чтобы переменная в CSS высоту, снять все границы и дать цвет фона.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

если вы хотите просто стиль, который вы знаете, что будет работать (например: на замену границу в ::перед элементом для большинства почтовых клиентов или <ИЕ8)

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

В обе стороны, если вы установите ширину, он всегда будет иметь это's размер.

Нет необходимости устанавливать дисплей:блок;` для этого.

Чтобы быть абсолютно безопасным, вы можете смешать оба, 'вызвать некоторые браузеры могут запутаться с высота:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

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

Это's на линию больше, но безопасность есть безопасность.

Этот метод вы должны использовать, чтобы быть совместимым практически со всем.

Помните: Gmail обнаруживает только встроенный CSS и некоторые клиенты электронной почты могут не поддерживать фона или границ. Если один сломается, вы все еще есть линия в 1px. Лучше, чем ничего.

В худшем случае, можно попробовать добавить цвета:синего;`.

В худшем из худших случаев, можно попробовать использовать в <цвет шрифта=на"голубой" и></шрифта и GT; тег и ставить ваш драгоценный<ч/> тег внутри него. Он будет наследовать в `<шрифт></шрифта и GT; тег цвета.

С помощью этого метода, вы будет хочу так: <ширина ч=то"50" и выровняйте=, что"оставили"/>.

Пример:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <hr width="50" align="left"/>
    </span>

Вот ссылка для вас, чтобы проверить: [http://jsfiddle.net/sna2D/][1]

[1]: http://jsfiddle.net/sna2D/ и"http://jsfiddle.net/sna2D/"

Комментарии (0)

Вы можете дать в <час noshade и GT; тег и заходим в свой CSS-файл и добавить :

в

в ч { границы-топ:0; цвет: #123455; }

в <час noshade /> Этот тест <час noshade />

в

Комментарии (0)

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

Свойство color это'т наследуются по умолчанию, так что следующий должен быть добавлен к HR's, чтобы разрешить наследования цвета:

в 

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

в

Комментарии (0)

Вы могли бы сделать это :

в

в ч { границы: 1px твердых красный; }

в <ч /> Этот тест <ч />

в

Комментарии (0)