Ändern der Farbe eines Stundenelements

Ich möchte die Farbe meines hrTags mithilfe von CSS ändern . Der Code, den ich unten ausprobiert habe, scheint nicht zu funktionieren:

hr {
    color: #123455;
}

Ich denke, Sie sollten border-colorstattdessen verwenden color, wenn Sie die Farbe der vom <hr>Tag erzeugten Linie ändern möchten.

In Kommentaren wurde jedoch darauf hingewiesen, dass der Rand beim Ändern der Größe Ihrer Linie immer noch so breit ist, wie Sie es in den Stilen angegeben haben, und die Linie mit der Standardfarbe gefüllt wird (was in den meisten Fällen kein gewünschter Effekt ist Zeit). In diesem Fall müssten Sie also auch angeben background-color(wie @Ibu in seiner Antwort vorgeschlagen hat).

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

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

In einem kürzlich von SitePoint veröffentlichten Artikel mit dem Titel „12 wenig bekannte CSS-Fakten“ wird erwähnt, dass er auf die übergeordneten Werte <hr>gesetzt werden kann, wenn Sie dies angeben .border-colorcolorhr { border-color: inherit }

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

Ich denke, das kann nützlich sein. Dies war eine einfache CSS-Auswahl.

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

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: So gestalten Sie HR mit CSS

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

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

Siehe die Geige .

Nur ein Rand mit Farbe reicht aus, um die Linie in einer anderen Farbe zu gestalten.

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

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

Dadurch bleibt die horizontale Regel 1 Pixel dick und gleichzeitig wird die Farbe geändert

Ich glaube, dies ist der effektivste Ansatz:

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

Oder wenn Sie es vorziehen, es auf allen Stundenelementen zu tun, schreiben Sie dies auf Ihr CSS:

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

hr
{
Farbe: # f00;
Hintergrundfarbe: # f00;
Höhe: 5px;
}}

hr
{
  background-color: #123455;
}

Der Hintergrund ist derjenige, den Sie ändern sollten

Sie können auch mit der Rahmenfarbe arbeiten. Ich bin mir nicht sicher, ob es Crossbrowser-Probleme gibt. Sie sollten es in verschiedenen Browsern testen

Wenn Sie die CSS-Klasse verwenden, wird sie von allen 'hr'-Tags verwendet. Wenn Sie jedoch eine bestimmte' hr'-Klasse verwenden möchten, verwenden Sie den folgenden Code, dh Inline-CSS

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

Wenn es nicht in Chrome funktioniert, versuchen Sie es mit dem folgenden Code:

<hr color="red" />

Nachdem ich alle Antworten hier gelesen und die beschriebene Komplexität gesehen hatte, machte ich eine kleine Ablenkung, um mit HR zu experimentieren. Und die Schlussfolgerung ist, dass Sie den größten Teil des von Ihnen geschriebenen monkeypatched CSS wegwerfen, diesen kleinen Primer lesen und einfach diese beiden Zeilen reinen CSS verwenden können:

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

Das ist ALLES, was Sie brauchen, um Ihre HRs zu gestalten.

• Funktioniert browserübergreifend, geräteübergreifend, Cross-OS, Cross-English-Channel, Cross-Age.
• Nein "Ich denke, das wird funktionieren ..." , "Sie müssen Safari / IE im Auge behalten ..." usw.
• keine zusätzliche CSS - nein height, width, background-color, coloretc. beteiligt.

Nur kugelsichere bunte HRs. Es ist so einfach ^TM .

Bonus: Um der HR eine gewisse Höhe zu geben H, setzen Sie einfach das border-widthas H/2.

Einige Browser verwenden das colorAttribut, andere das background-colorAttribut. Sicher sein:

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

Ich teste auf IE, Firefox und Chrome im Mai 2015 und dies funktioniert am besten mit den aktuellen Versionen. Es zentriert die Personalabteilung und macht sie zu 70% breit:

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

<hr class="light" />

Sie sollten die Rahmenbreite auf 0 setzen. Es funktioniert gut in Firefox und Chrome.

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

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

Es ist einfach und mein Favorit.

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

Sie können Bootstrap-BG-Klasse wie hinzufügen

<hr class="bg-light" />

Da ich keinen Ruf zum Kommentieren habe, werde ich hier ein paar Ideen geben.

Wenn Sie eine variable CSS-Höhe wünschen, entfernen Sie alle Ränder und geben Sie eine Hintergrundfarbe an.

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

Wenn Sie einfach einen Stil möchten, von dem Sie wissen, dass er funktioniert (Beispiel: Ersetzen eines Rahmens in einem :: before-Element für die meisten E-Mail-Clients oder

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

Wenn Sie eine Breite festlegen, hat diese in beiden Fällen immer ihre Größe.

Keine Notwendigkeit, dies einzustellen display:block;.

Um absolut sicher zu sein, können Sie beide mischen, da einige Browser verwirrt werden können mit height:0px;:

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

Mit dieser Methode können Sie sicher sein, dass die Höhe mindestens 2 Pixel beträgt.

Es ist eine Linie mehr, aber Sicherheit ist Sicherheit.

Dies ist die Methode, die Sie verwenden sollten, um mit fast allem kompatibel zu sein.

Denken Sie daran: Google Mail erkennt nur Inline-CSS und einige E-Mail-Clients unterstützen möglicherweise keine Hintergründe oder Rahmen. Wenn einer fehlschlägt, haben Sie immer noch eine 1px-Leitung. Besser als nichts.

Im schlimmsten Fall können Sie versuchen, hinzuzufügen color:blue;.

Im schlimmsten Fall können Sie versuchen, ein <font color="blue"></font>Tag zu verwenden und Ihr wertvolles <hr/>Tag darin zu platzieren. Es wird die <font></font>Tag-Farbe erben .

Mit dieser Methode möchten Sie Folgendes tun : <hr width="50" align="left"/>.

Beispiel:

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

Hier ist ein Link, den Sie überprüfen können: http://jsfiddle.net/sna2D/

Sie können CSS verwenden, um eine Linie mit einer anderen Farbe zu erstellen. Das Beispiel wäre wie folgt:

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

Dieser Code zeigt eine vertikale graue Linie an.

Nun, ich bin neu in HTML, CSS und Java, aber ich habe meinen Weg ausprobiert, der in allen Browsern für mich funktioniert hat. Ich habe JS anstelle von CSS verwendet, was mit einigen Browsern nicht funktioniert .

Zunächst habe ich id="myHR"HR-Element gegeben und es in Java Script verwendet.
Hier ist der 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";

1. Code funktioniert für ältere IE

2. Versucht für viele Farben

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

Durch die Verwendung von Schriftfarben zum Ändern horizontaler Regeln werden diese flexibler und benutzerfreundlicher.

Die colorEigenschaft wird standardmäßig nicht vererbt, daher muss Folgendes zu hr hinzugefügt werden, um die Farbvererbung zu ermöglichen:

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

Sie könnten dies tun:

hr {
  border: 1px solid red;
}

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

Sie können das <hr noshade>Tag geben und zu Ihrer CSS-Datei gehen und hinzufügen:

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

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

In der Regel können Sie mit CSS nicht einfach die Farbe einer horizontalen Linie wie alles andere festlegen. Zunächst benötigt Internet Explorer die Farbe in Ihrem CSS, um wie folgt zu lesen:

"Farbe: # 123455"

Opera und Mozilla benötigen jedoch die Farbe in Ihrem CSS, um Folgendes zu lesen:

"Hintergrundfarbe: # 123455"

Sie müssen also beide Optionen zu Ihrem CSS hinzufügen.

Als Nächstes müssen Sie der horizontalen Linie einige Abmessungen zuweisen. Andernfalls wird standardmäßig die von Ihrem Browser festgelegte Standardhöhe, -breite und -farbe verwendet. Hier ist ein Beispielcode, wie Ihr CSS aussehen sollte, um die blaue horizontale Linie zu erhalten.

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

Oder Sie können den Stil einfach direkt zu Ihrer HTML-Seite hinzufügen, wenn Sie eine horizontale Linie einfügen, wie folgt:

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

Hoffe das hilft.

Ich habe in jeder Hinsicht eine Wette abgeschlossen:

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