888 votes

Changer la couleur d'un élément rh

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

1242voto

Anton Strogonoff Points 6792

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 }.

139voto

Cameron Points 281

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

123voto

Omm Points 341

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

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

50voto

Studio3 Points 11
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

30voto

Eric Fortis Points 6226

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

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X