web-dev-qa-db-fra.com

Changer 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;
}
htmlcss
686
koool

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, dans les commentaires, il a été souligné que, si vous modifiez la taille de votre ligne, la bordure sera toujours aussi large que ce que vous avez spécifié dans les styles, et la ligne sera remplie avec la couleur par défaut (effet non souhaité temps). Il semble donc que dans ce cas, vous devez également spécifier background-color (comme @Ibu l'a 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 intitulé «12 faits CSS peu connus» , publié récemment par SitePoint, mentionne que <hr> peut définir son border-color sur la color de son parent si vous spécifiez hr { border-color: inherit }.

1029
Tony
  • border-color fonctionne dans Chrome et Safari .
  • background-color fonctionne dans Firefox et Opera.
  • color fonctionne dans IE7 + .
103
Cameron

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

hr { background-color: red; height: 1px; border: 0; }
67
Omm
hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

Cela vous permet de modifier la hauteur si nécessaire. Bonne chance. Source: Comment styliser les ressources humaines avec CSS

39
Studio3

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

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

Voir le Fiddle .

20
Eric Fortis

Seules les bordures en couleur suffisent pour créer une ligne de couleur différente.

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

Cela gardera l'épaisseur horizontale de la règle horizontale tout en en modifiant la couleur.

9
Brian McCall

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;
}
8
Joao Alves Marrucho
hr 
 {
 color: # f00; 
 background-color: # f00; 
 height: 5px; 
}
8
sushil bharwani

Après avoir lu toutes les réponses ici et avoir vu la complexité décrite, je me suis lancé dans une petite déviation pour expérimenter les ressources humaines. Et la conclusion est que vous pouvez jeter la plupart des CSS que vous avez écrites, lisez ce petit primer et utilisez simplement ces deux lignes de CSS pur:

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

C'est &AGRAVE; TOUS que vous devez personnaliser vos ressources humaines.

  • Fonctionne sur plusieurs navigateurs, appareils, appareils, ordinateurs, canaux.
  • Non "Je pense que cela fonctionnera ...", "vous devez garder Safari/IE à l'esprit ...", etc.
  • no css supplémentaire - non height, width, background-color, color, etc.

Juste des balles HR colorées. C'est que simpleTM.

Bonus: pour donner au HR une certaine hauteur H, définissez simplement le border-width sur H/2.

6
kumar_harsh

si vous utilisez la classe css, elle sera prise par toutes les balises 'hr', mais si vous voulez un 'hr' particulier, utilisez le code ci-dessous i.e, css en ligne

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

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

<hr color="red" />
5
deepi

Je teste sur IE, Firefox et Chrome en mai 2015 et cela fonctionne mieux avec les versions actuelles. Il centre les ressources humaines et les étend à 70%:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}
<hr class="light" />

4
Elizabeth Gee

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

4
zooks

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

<hr style="background-color: #dd3333" />
4
Mert
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 de crossbrowser avec ceci. vous devriez le tester dans différents navigateurs

4
Ibu

Certains navigateurs utilisent l'attribut color et d'autres l'attribut background-color. Pour être sûr:

hr{
    color: #color;
    background-color: #color;
}
3
Kyle Sletten

Comme je n'ai pas de réputation à commenter, je vais 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 que vous savez qui fonctionnera (exemple: 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, il aura toujours sa taille.

Pas besoin de définir 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 2 pixels de hauteur.

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

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

N'oubliez pas: Gmail détecte uniquement les fichiers CSS intégrés et certains clients de messagerie risquent de ne pas prendre en charge les arrière-plans ou les bordures. Si l'un d'eux é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 utiliser une balise <font color="blue"></font> et y insérer votre précieuse balise <hr/>. Il héritera de la couleur de la balise <font></font>.

Avec cette méthode, vous VOUDREZ FAIRE comme suit: <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/

2
Ismael Miguel
  1. Code fonctionne pour les anciens IE

  2. Essayé pour beaucoup de couleurs

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

Bien, je suis nouveau en HTML, CSS et Java, mais j’ai essayé de le faire, ce 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 HR et je 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";
0
Murtaza

Vous pourriez faire ceci:

hr {
  border: 1px solid red;
}
<hr />
This s a test
<hr />

0
Aseel

J'ai pris un pari dans les deux sens:

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

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

La propriété color n'est pas héritée par défaut. Par conséquent, les éléments suivants doivent être ajoutés à hr 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">

0
Larry

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

hr {
    border-top:0;
    color: #123455;
}
<hr noshade />
This s a test
<hr noshade />

0
pacos

Vous pouvez utiliser CSS pour créer une ligne avec une couleur différente, par exemple: 

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.

0
user2689252

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

“Couleur: # 123455”

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

“Couleur de fond: # 123455”

Vous devrez donc ajouter les deux options à votre CSS. 

Ensuite, vous devrez donner à la ligne horizontale des dimensions ou la valeur par défaut sera la hauteur, la largeur et la couleur standard définies par votre navigateur. Voici un exemple de code de ce à quoi votre code 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. 

0
Aubrey Love