Modifica del colore di un elemento hr

Voglio cambiare il colore del mio hrtag usando CSS. Il codice che ho provato di seguito non sembra funzionare:

hr {
    color: #123455;
}

Penso che dovresti usare border-colorinvece di color, se la tua intenzione è quella di cambiare il colore della linea prodotta dal <hr>tag.

Tuttavia, è stato sottolineato nei commenti che, se si modifica la dimensione della linea, il bordo sarà comunque largo quanto specificato negli stili e la linea verrà riempita con il colore predefinito (che non è l'effetto desiderato nella maggior parte dei tempo). Quindi sembra che in questo caso dovresti anche specificare background-color(come suggerito da @Ibu nella sua risposta).

Il progetto HTML 5 Boilerplate nel foglio di stile predefinito specifica la seguente regola:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

Un articolo intitolato "12 fatti CSS poco noti" , pubblicato di recente da SitePoint, menziona che è <hr>possibile impostarlo su border-colorquello dei suoi genitori, colorse specificato hr { border-color: inherit }.

• border-colorfunziona in Chrome e Safari .
• background-color funziona in Firefox e Opera.
• colorfunziona in IE7 + .

Penso che questo possa essere utile. questo era un semplice selettore CSS.

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

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

Farlo in questo modo consente di modificare l'altezza, se necessario. In bocca al lupo. Fonte: How To Style HR con CSS

Testato su Firefox, Opera, Internet Explorer, Chrome e Safari.

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

Vedi il violino .

Solo il bordo superiore con colore è sufficiente per rendere la linea di colore diverso.

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

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

Ciò manterrà la regola orizzontale 1px di spessore modificandone anche il colore

Credo che questo sia l'approccio più efficace:

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

O se preferisci farlo su tutti gli elementi h, scrivi questo sul tuo CSS:

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

hr
{
colore: # f00;
colore di sfondo: # f00;
altezza: 5px;
}

hr
{
  background-color: #123455;
}

lo sfondo è quello che dovresti provare a cambiare

Puoi anche lavorare con il colore dei bordi. non sono sicuro di pensare che ci siano problemi di crossbrowser con questo. dovresti testarlo in diversi browser

se usi la classe css, allora sarà preso da tutti i tag 'hr', ma se vuoi per un particolare 'hr' usa il codice qui sotto, cioè inline css

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

se non funziona in Chrome prova sotto il codice:

<hr color="red" />

Dopo aver letto tutte le risposte qui e aver visto la complessità descritta, ho iniziato un piccolo diversivo per sperimentare con le risorse umane. E la conclusione è che puoi buttare via la maggior parte dei CSS monkeypatched che hai scritto, leggere questo piccolo primer e usare solo queste due righe di CSS puro:

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

Questo è TUTTO ciò di cui hai bisogno per modellare le tue risorse umane.

• Funziona cross-browser, cross-device, cross-os, cross-english-channel, cross-age.
• No "Penso che funzionerà ..." , "devi tenere a mente Safari / IE ..." , ecc.
• No CSS in più - senza height, width, background-color, color, ecc coinvolti.

Solo risorse umane colorate antiproiettile. È quella semplice ^TM .

Bonus: per dare all'altezza un po 'di risorse umane H, basta impostare il simbolo border-widthas H/2.

Alcuni browser utilizzano l' colorattributo e altri utilizzano l' background-colorattributo. Per essere al sicuro:

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

Sto testando IE, Firefox e Chrome a maggio 2015 e questo funziona meglio con le versioni attuali. Centra l'AR e la rende larga al 70%:

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

<hr class="light" />

È necessario impostare la larghezza del bordo su 0; Funziona bene su Firefox e Chrome.

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

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

È semplice e il mio preferito.

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

Puoi aggiungere bootstrap bg class come

<hr class="bg-light" />

Dal momento che non ho la reputazione di commentare, darò qui alcune idee.

se vuoi un'altezza variabile css, togli tutti i bordi e dai un colore di sfondo.

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

se vuoi semplicemente uno stile che sai che funzionerà (esempio: sostituire un bordo in un elemento :: before per la maggior parte dei client di posta elettronica o

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

In entrambi i modi, se imposti una larghezza, avrà sempre la sua dimensione.

Non è necessario impostare display:block;per questo.

Per essere totalmente sicuri, puoi mescolare entrambi, perché alcuni browser possono confondersi con height:0px;:

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

Con questo metodo puoi essere sicuro che avrà almeno 2px di altezza.

È una linea in più, ma la sicurezza è sicurezza.

Questo è il metodo che dovresti usare per essere compatibile con quasi tutto.

Ricorda: Gmail rileva solo i CSS in linea e alcuni client di posta elettronica potrebbero non supportare sfondi o bordi. Se uno fallisce, avrai comunque una linea 1px. Meglio di niente.

Nel peggiore dei casi, puoi provare ad aggiungere color:blue;.

Nel peggiore dei casi peggiori, puoi provare a usare un <font color="blue"></font>tag e inserire il tuo prezioso <hr/>tag al suo interno. Erediterà il<font></font> colore tag.

Con questo metodo, si WILL voler fare in questo modo:<hr width="50" align="left"/> .

Esempio:

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

Ecco un link da controllare: http://jsfiddle.net/sna2D/

Puoi usare i CSS per creare una linea con un colore diverso, ad esempio sarebbe così:

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

quel codice mostrerà una linea grigia verticale.

Bene, sono nuovo in HTML, CSS e Java ma ho provato la mia strada che ha funzionato per me in tutti i browser. Ho usato JS invece di CSS che non funziona con alcuni browser .

Prima di tutto ho dato id="myHR"all'elemento HR e l'ho usato in Java Script.
Ecco il codice.

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. Il codice funziona per IE più vecchi

2. Provato per molti colori

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

L'uso dei colori dei caratteri per modificare le regole orizzontali li rende più flessibili e facili da usare.

La colorproprietà non è ereditata per impostazione predefinita, quindi è necessario aggiungere quanto segue a h per consentire l'ereditarietà dei colori:

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

Potresti farlo:

hr {
  border: 1px solid red;
}

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

Puoi dare il <hr noshade>tag e andare al tuo file CSS e aggiungere:

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

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

Come regola generale, non puoi semplicemente impostare il colore di una linea orizzontale con CSS come qualsiasi altra cosa. Prima di tutto, Internet Explorer ha bisogno del colore nel tuo CSS per leggere in questo modo:

“Colore: # 123455”

Ma Opera e Mozilla hanno bisogno del colore nel tuo CSS per leggere in questo modo:

“Background-color: # 123455”

Quindi, dovrai aggiungere entrambe le opzioni al tuo CSS.

Successivamente, dovrai dare alcune dimensioni alla linea orizzontale o l'impostazione predefinita sarà l'altezza, la larghezza e il colore standard impostati dal tuo browser. Ecco un codice di esempio di come dovrebbe essere il tuo CSS per ottenere la linea orizzontale blu.

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

Oppure potresti semplicemente aggiungere lo stile alla tua pagina HTML direttamente quando inserisci una linea orizzontale, in questo modo:

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

Spero che sia di aiuto.

Ho scommesso in entrambi i modi:

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