Question Changer la couleur d'un élément hr


Je veux changer la couleur de mon hr tag en utilisant CSS. Le code que j'ai essayé ci-dessous ne semble pas fonctionner:

hr {
  color: #123455;
}

607
2018-06-17 06:15


origine


Réponses:


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

Bien qu'il ait été indiqué dans les commentaires que, si vous changez la taille de votre ligne, la bordure sera toujours aussi large que vous avez spécifié dans les styles, et la ligne sera remplie avec la couleur par défaut (ce qui n'est pas un effet désiré) temps). Donc, il semble que dans ce cas, vous devrez également spécifier background-color (comme @Ibu suggéré dans sa réponse).

HTML 5 Boilerplate 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 titré "12 Faits CSS peu connus", publié récemment par SitePoint, mentionne que <hr> peut définir son border-color à ses parents color si vous spécifiez hr { border-color: inherit }.


915
2018-06-17 06:17



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


93
2017-09-13 04:30



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

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

61
2018-05-01 14:56



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

Le faire de cette façon vous permet de changer la hauteur si nécessaire. Bonne chance. La source: Comment Style RH avec CSS


32
2017-12-05 02:52



testé en ff, opéra, c.-à-d. chrome et safari

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

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


17
2018-06-17 06:22



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

Cela gardera la règle horizontale 1px épais tout en changeant la couleur de celle-ci


9
2017-10-25 16:55



Seul le bord supérieur avec couleur est suffisant pour rendre la ligne de couleur différente.

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

7
2018-05-17 13:00



heure
{
couleur: # f00;
couleur de fond: # f00;
hauteur: 5px;
}

6
2018-06-17 06:18



Je crois que c'est l'approche la plus efficace:

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

Ou si vous préférez le faire sur tous les éléments hr, écrivez ceci sur votre CSS:

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

6
2018-05-10 13:55



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 que je pense qu'il y a des problèmes avec les navigateurs. vous devriez le tester dans différents navigateurs


4
2018-06-17 06:17



Si vous utilisez css class alors il sera pris par toutes les balises 'hr', mais si vous voulez un 'hr' particulier, utilisez le code ci-dessous i.e, inline css

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

si cela ne fonctionne pas en chrome, essayez le code ci-dessous:

<hr color="red" />

4
2018-06-17 06:22