Changer la couleur d'un élément hr

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

hr {
    color: #123455;
}

Je pense que vous devriez utiliser à la border-colorplace de color, si votre intention est de changer la couleur de la ligne produite par le <hr>tag.

Cependant, il a été souligné dans les commentaires que, si vous modifiez la taille de votre ligne, la bordure sera toujours aussi large que vous l'avez spécifié dans les styles, et la ligne sera remplie avec la couleur par défaut (ce qui n'est pas un effet souhaité la plupart des temps). Il semble donc que dans ce cas, vous devrez é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 faits CSS peu connus» , publié récemment par SitePoint, mentionne que vous <hr>pouvez le définir border-colorsur celui de son parent colorsi vous le spécifiez hr { border-color: inherit }.

• border-colorfonctionne dans Chrome et Safari .
• background-color fonctionne dans Firefox et Opera.
• colorfonctionne dans IE7 + .

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

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

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

Le faire de cette façon vous permet de modifier la hauteur si nécessaire. Bonne chance. Source: Comment styliser les RH avec CSS

Testé dans Firefox, Opera, Internet Explorer, Chrome et Safari.

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

Voir le violon .

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

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

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

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

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

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

hr
{
  background-color: #123455;
}

l'arrière-plan 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 de croisement avec cela. vous devez le tester dans différents navigateurs

si vous utilisez la classe css, elle sera prise par toutes les balises 'hr', mais si vous voulez pour un 'hr' particulier, utilisez le code ci-dessous, c'est-à-dire css en ligne

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

si cela ne fonctionne pas dans Chrome, essayez le code ci-dessous:

<hr color="red" />

Après avoir lu toutes les réponses ici, et vu la complexité décrite, je me suis mis à une petite diversion pour expérimenter avec les RH. Et, la conclusion est que vous pouvez jeter la plupart du CSS monkeypatch que vous avez écrit, lire cette petite introduction et utiliser simplement ces deux lignes de CSS pur:

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

C'est TOUT ce dont vous avez besoin pour personnaliser vos RH.

• Fonctionne cross-browser, cross-device, cross-os, cross-english-channel, cross-ages.
• Non "Je pense que cela fonctionnera ..." , "vous devez garder Safari / IE à l'esprit ..." , etc.
• pas supplémentaire css - non height, width, background-color, color, etc. impliqués.

Des RH colorés à l'épreuve des balles. C'est aussi simple que ^TM .

Bonus: pour donner de la hauteur au HR H, il suffit de définir le border-widthas H/2.

Certains navigateurs utilisent l' colorattribut et certains utilisent l' background-colorattribut. Pour être sûr:

hr{
    color: #color;
    background-color: #color;
}

Je teste IE, Firefox et Chrome en mai 2015 et cela fonctionne mieux avec les versions actuelles. Il centre le HR et le rend large à 70%:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

Vous devez définir border-width à 0; Cela fonctionne bien dans Firefox et Chrome.

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

<hr />
This is a test
<hr />

C'est simple et mon préféré.

<hr style="background-color: #dd3333" />

Vous pouvez ajouter la classe bg bootstrap comme

<hr class="bg-light" />

Comme je n'ai pas la réputation de commenter, je vais vous donner ici quelques idées.

si vous voulez une hauteur variable css, enlevez toutes les bordures et donnez une couleur de fond.

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

si vous voulez simplement un style qui fonctionne (exemple: pour remplacer une bordure dans un élément :: before pour la plupart des clients de messagerie ou

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

Dans les deux cas, si vous définissez une largeur, elle aura toujours sa taille.

Pas besoin de régler display:block;pour cela.

Pour être totalement sûr, vous pouvez mélanger les deux, car certains navigateurs peuvent être confondus avec height:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

Avec cette méthode, vous pouvez être sûr qu'il aura au moins 2px de hauteur.

C'est une ligne de plus, mais la sécurité est la sécurité.

C'est la méthode que vous devez utiliser pour être compatible avec presque tout.

N'oubliez pas: Gmail détecte uniquement les CSS en ligne et certains clients de messagerie peuvent ne pas prendre en charge les arrière-plans ou les bordures. Si l'un échoue, vous aurez toujours une ligne 1px. Mieux que rien.

Dans le pire des cas, vous pouvez essayer d'ajouter color:blue;.

Dans le pire des cas, vous pouvez essayer d'utiliser une <font color="blue"></font>étiquette et y mettre votre précieuse <hr/>étiquette. Il héritera de la <font></font>couleur du tag.

Avec cette méthode, vous SEREZ voulez faire comme ceci: <hr width="50" align="left"/>.

Exemple:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

Voici un lien à vérifier: http://jsfiddle.net/sna2D/

Vous pouvez utiliser CSS pour créer une ligne avec une couleur différente, l'exemple serait comme ça:

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

ce code affichera une ligne grise verticale.

Eh bien, je suis nouveau en HTML, CSS et en Java mais j'ai essayé mon chemin qui a fonctionné pour moi dans tous les navigateurs. J'ai utilisé JS au lieu de CSS qui ne fonctionne pas avec certains navigateurs .

Tout d'abord, j'ai donné id="myHR"à l'élément RH et l' ai utilisé dans Java Script.
Voici le code.

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. Le code fonctionne pour les anciens IE

2. Essayé pour de nombreuses couleurs

   <hr color="black">
   <hr color="blue">

L'utilisation des couleurs de police pour modifier les règles horizontales les rend plus flexibles et faciles à utiliser.

La colorpropriété n'est pas héritée par défaut, donc les éléments suivants doivent être ajoutés aux heures pour permettre l'héritage des couleurs:

/* 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">

Vous pouvez faire ceci:

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

Vous pouvez donner la <hr noshade>balise et aller dans votre fichier css et ajouter:

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

En règle générale, vous ne pouvez pas simplement définir la couleur d'une ligne horizontale avec CSS comme vous le feriez pour toute autre chose. Tout d'abord, Internet Explorer a besoin de la couleur de votre CSS pour se lire comme ceci:

“Couleur: # 123455”

Mais Opera et Mozilla ont besoin de la couleur de votre CSS pour lire comme ceci:

"Couleur de fond: # 123455"

Vous devrez donc ajouter les deux options à votre CSS.

Ensuite, vous devrez donner à la ligne horizontale quelques dimensions ou elle sera par défaut à la hauteur, la largeur et la couleur standard définies par votre navigateur. Voici un exemple de code de ce à quoi votre CSS devrait ressembler pour obtenir la ligne horizontale bleue.

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

Ou vous pouvez simplement ajouter le style à votre page HTML directement lorsque vous insérez une ligne horizontale, comme ceci:

<hr style="background:#123455" />

J'espère que cela t'aides.

J'ai pris un pari dans chaque sens:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }