Ä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

Ich denke, du solltest border-color anstelle von color verwenden, wenn deine Absicht ist, die Farbe der Linie zu ändern, die vom

---

-Tag erzeugt wird.

In Kommentaren wurde jedoch darauf hingewiesen, dass, wenn du die Größe deiner Linie änderst, der Rand immer noch so breit sein wird, wie du es in den Styles spezifiziert hast, und die Linie mit der Standardfarbe gefüllt wird (was die meiste Zeit nicht erwünscht ist). Es scheint also, dass du in diesem Fall auch background-color spezifizieren müsstest (wie von @Ibu vorgeschlagen).

Das HTML 5 Boilerplate-Projekt spezifiziert in seinem Standard-Stylesheet die folgende Regel:

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

Ein Artikel mit dem Titel “12 wenig bekannte CSS-Fakten”, der kürzlich von SitePoint veröffentlicht wurde, erwähnt, dass

---

seine border-color auf die color seines Elternelements setzen kann, wenn du hr { border-color: inherit } spezifizierst.

Answer 2

• border-color funktioniert in Chrome und Safari.
• background-color funktioniert in Firefox und Opera.
• color funktioniert in IE7+.

Answer 3

Ich denke, das kann nützlich sein. Das war ein einfacher CSS-Selektor.

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

Answer 4

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

Auf diese Weise können Sie die Höhe bei Bedarf ändern. Viel Glück. Quelle: Wie man HR mit CSS stylen kann

Answer 5

Getestet in Firefox, Opera, Internet Explorer, Chrome und Safari.

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

Siehe den Fiddle.