Changer la couleur d'un élément rh

Question

Je veux changer la couleur de mon hr balise à l'aide de CSS. Le code que j'ai essayé ci-dessous ne semble pas fonctionner:

hr {
  color: #123455;
}

Answer 1

Je pense que vous devriez utiliser border-color au lieu de color, si votre intention est de changer la couleur de la ligne de produit par <hr> balise.

Bien que, il a été signalé dans les commentaires, si vous modifiez la taille de votre ligne, la frontière sera toujours aussi large que vous avez spécifié dans les styles, et la ligne sera rempli avec la couleur par défaut (ce qui n'est pas l'effet désiré, la plupart du temps). Il semble donc que dans ce cas, vous devez également spécifier background-color (@Ibu a suggéré dans sa réponse).

HTML 5 Réutilisable projet dans sa feuille de style par défaut spécifie la règle suivante:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

Un article intitulé "12 Peu Connue CSS Faits", publié récemment par SitePoint, mentionne qu' <hr> peut définir son border-color à celle de son parent color si vous spécifiez hr { border-color: inherit }.

Answer 2

border-color fonctionne dans Chrome et Safari
background-color fonctionne dans Firefox et Opera
color travaille dans IE7+

Answer 3

Je pense que cela peut être utile. c'était simple sélecteur CSS.

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

Answer 4

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

Cette façon de faire permet de modifier la taille si nécessaire. Bonne chance. Source: Comment le Style des RH avec les CSS

Answer 5

testé dans ff, opera, ie, chrome et safari

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

voir le violon http://jsfiddle.net/HPSjU/