Ändern der Farbe eines hr-Elements

Question

Ich möchte die Farbe meines hr Tags mit CSS ändern. Der unten stehende Code, den ich versucht habe, funktioniert anscheinend nicht:

hr {
    color: #123455;
}

Answer 1

Dies hält die horizontale Linie 1px dick und ändert gleichzeitig die Farbe davon:

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

Answer 2

Nur border-top mit Farbe reicht aus, um die Linie in einer anderen Farbe erscheinen zu lassen.

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

Answer 3

Nachdem ich alle Antworten hier gelesen habe und die beschriebene Komplexität gesehen habe, bin ich auf eine kleine Abweichung für Experimente mit HR gestoßen. Und das Fazit ist, dass Sie den Großteil des monkeypatched CSS, das Sie geschrieben haben, wegwerfen können. Lesen Sie diese kleine Einführung und verwenden Sie einfach diese zwei Zeilen reinen CSS:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* oder was auch immer */
}

Das ist ALLE, was Sie benötigen, um Ihre HR zu gestalten.

• Funktioniert plattformübergreifend, geräteübergreifend, betriebssystemübergreifend, altersübergreifend.
• Kein "Ich denke, das wird funktionieren...", "Sie müssen an Safari/IE denken..." usw.
• kein zusätzliches css - keine height, width, background-color, color, usw. beteiligt.

Nur bulletproof bunte HRs. Es ist so einfachTM.

---

Bonus: Um dem HR eine Höhe H zu geben, setzen Sie einfach die border-width als H/2.

Answer 4

hr {
  color: #f00;
  background-color: #f00;
  height: 5px;
}

Answer 5

hr {
  background-color: #123455;
}

Der Hintergrund ist der, den du versuchen solltest zu ändern.

Du kannst auch mit der Farbe der Rahmen arbeiten. Ich bin mir nicht sicher; ich glaube, es gibt Probleme mit verschiedenen Browsern. Du solltest es in verschiedenen Browsern testen.