it-swarm.com.ru

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

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

hr {
    color: #123455;
}
720
koool

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

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

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

hr { background-color: red; height: 1px; border: 0; }
76
Omm
hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

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

39
Studio3

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

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

см. Скрипку .

20
Eric Fortis

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

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

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

9
Brian McCall

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

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

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

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}
8
Joao Alves Marrucho
hr 
 {
 color: # f00; 
 background-color: # f00; 
 высота: 5px; 
} 
8
sushil bharwani

Прочитав все ответы здесь и увидев описанную сложность, я решил немного поэкспериментировать с 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-width как H/2.

6
kumar_harsh
hr
{
  background-color: #123455;
}

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

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

5
Ibu

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

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

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

<hr color="red" />
5
deepi

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

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

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

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

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

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

hr{
    color: #color;
    background-color: #color;
}
3
Kyle Sletten

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

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

2
Ismael Miguel
  1. Код работает для старых IE
  2. Пробовал для многих цветов

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

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

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

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

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

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

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

Свойство 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">
0
Larry

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

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

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

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

0
user2689252

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

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

0
Aubrey Love