Зміна кольору елемента 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 px товстим, а також змінити його колір

Я вважаю, що це найбільш ефективний підхід:

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

Або якщо ви віддаєте перевагу робити це на всіх елементах hr, напишіть це на вас CSS:

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

год
{
колір: # f00;
фоновий колір: # f00;
висота: 5px;
}

hr
{
  background-color: #123455;
}

фон - це те, що ви повинні спробувати змінити

Ви також можете працювати з кольором бордюрів. я не впевнений, я думаю, що з цим виникають проблеми крос-браузера. ви повинні перевірити його в різних браузерах

якщо ви використовуєте клас css, то він буде взято всі теги 'hr', але якщо ви хочете для конкретного 'hr', використовуйте наведений нижче код, тобто inline css

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

якщо це не працює в хромі, спробуйте нижче код:

<hr color="red" />

Прочитавши всі відповіді тут і побачивши описану складність, я взяв на себе невелику диверсію для експерименту з HR. І висновок полягає в тому, що ви можете викинути більшість написаних маніпуляторами CSS, прочитати цей невеликий буквар і просто використовувати ці два рядки чистого CSS:

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

Це ВСЕ, що вам потрібно, щоб стилізувати свої HR.

• Працює крос-браузер, крос-пристрій, крос-ос, крос-англ-канал, перехресні віки.
• Ні "Я думаю, що це спрацює ..." , "Вам потрібно пам’ятати про Safari / IE ..." тощо.
• без додаткової CSS - немає height, width, background-color, colorі т.д. участь.

Просто куленебезпечні барвисті людські кадри. Це така проста ^ТМ .

Бонус: Щоб дати персоналу деякий зріст H, просто встановіть border-widthяк 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" />

Ви повинні встановити ширину межі на 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" />

Ви можете додати клас завантаження bg, як

<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Властивість не успадковується за замовчуванням, тому такі потреби бути додані в годину, щоб дозволити колір спадкування:

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