Cambiare il colore di un elemento hr

Voglio cambiare il colore del mio tag hr usando i CSS. Il codice che ho provato qui sotto non sembra funzionare:

hr {
    color: #123455;
}
Uwe Keim
Domanda modificata 28º dicembre 2018 в 1:22
Programmazione
html css
17º giugno 2011 в 6:15
20 visualizzazioni
Soluzione

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

Anche se è stato sottolineato nei commenti che, se cambi la dimensione della tua linea, il bordo sarà ancora largo come hai specificato negli stili, e la linea sarà riempita con il colore predefinito (che non è un effetto desiderato la maggior parte delle volte). Quindi sembra che in questo caso dovresti anche specificare background-color (come suggerito da @Ibu nella sua risposta).

Il progetto HTML 5 Boilerplate nel suo foglio di stile di default 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 Little-Known CSS Facts", pubblicato recentemente da SitePoint, menziona che <hr>può impostare il suo border-color al suo genitore's color se si specifica hr { border-color: inherit }.

Anton Strogonoff
Risposta modificata 13º aprile 2019 в 10:32
Commentari (5)

pre> hr { color: #f00; background-color: #f00; altezza: 5px; }

Commentari (0)
 
hr
{
  background-color: #123455;
}

lo sfondo è quello che dovresti provare a cambiare

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

Commentari (5)