Changement de la couleur d'un élément hr

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

hr {
    color: #123455;
}
Uwe Keim
Question modifiée 28 décembre 2018 в 1:22
Programmation
html css
17 juin 2011 в 6:15
18 vues
Solution

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

Cependant, il a été signalé dans les commentaires que, si vous changez la taille de votre ligne, la bordure sera toujours aussi large que celle que vous avez spécifiée dans les styles, et la ligne sera remplie avec la couleur par défaut (ce qui n'est pas un effet désiré la plupart du temps). Il semble donc que dans ce cas, vous devriez également spécifier background-color (comme @Ibu l'a suggéré dans sa réponse).

Le projet HTML 5 Boilerplate 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 Little-Known CSS Facts", publié récemment par SitePoint, mentionne que <hr> peut définir sa border-color sur la color de son parent si vous spécifiez hr { border-color : inherit }.

Anton Strogonoff
Réponse modifiée 13 avril 2019 в 10:32
Commentaires (5)
 
hr
{
couleur : #f00 ;
couleur de fond : #f00 ;
hauteur : 5px ;
}
Commentaires (0)
 
hr
{
  background-color: #123455;
}

le fond est celui que vous devriez essayer de changer

Vous pouvez également travailler avec la couleur des bordures. Je ne suis pas sûr, je pense qu'il y a des problèmes de crossbrowser avec cela. Vous devriez le tester dans différents navigateurs.

Commentaires (5)