it-swarm.com.de

Ändern der Farbe eines hr-Elements

Ich möchte die Farbe meines hr-Tags mit CSS ändern. Der Code, den ich unten ausprobiert habe, scheint nicht zu funktionieren:

hr {
    color: #123455;
}
686
koool

Ich denke, Sie sollten border-color anstelle von color verwenden, wenn Sie die Farbe der durch <hr>-Tag erzeugten Zeile ändern möchten.

In Kommentaren wurde zwar darauf hingewiesen, dass, wenn Sie die Größe Ihrer Linie ändern, der Rahmen immer noch so breit ist, wie Sie in den Stilen angegeben haben, und dass die Linie mit der Standardfarbe gefüllt wird (was in den meisten Fällen nicht der gewünschte Effekt ist) Zeit). Es scheint also, als müssten Sie in diesem Fall auch background-color angeben (wie @Ibu in seiner Antwort vorschlägt).

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

Ein Artikel mit dem Titel „12 wenig bekannte CSS-Fakten“ , kürzlich von SitePoint veröffentlicht, erwähnt, dass <hr> seinen border-color auf color des übergeordneten Objekts setzen kann, wenn Sie hr { border-color: inherit } angeben.

1029
Tony
  • border-color funktioniert in Chrome und Safari .
  • background-color funktioniert in Firefox und Opera.
  • color arbeitet in IE7 + .
103
Cameron

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

hr { background-color: red; height: 1px; border: 0; }
67
Omm
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

39
Studio3

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

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

Siehe die Fiddle .

20
Eric Fortis

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

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

Dadurch bleibt die horizontale Regel 1 x dick und ändert gleichzeitig die Farbe

9
Brian McCall

Ich glaube, dass dies der effektivste Ansatz ist: 

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

Oder wenn Sie es vorziehen, dies auf allen hr-Elementen zu tun, schreiben Sie dies in Ihr CSS:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}
8
hr 
 {
 Farbe: # f00; 
 Hintergrundfarbe: # f00; 
 Höhe: 5px; 
} 
8
sushil bharwani

Nachdem ich hier alle Antworten gelesen und die beschriebene Komplexität gesehen habe, habe ich mich auf eine kleine Ablenkung für das Experimentieren mit HR konzentriert. Die Schlussfolgerung ist, dass Sie den Großteil der von Monkeypatched CSS, den Sie geschrieben haben, verwerfen, diesen kleinen Primer lesen und einfach diese beiden Zeilen von reinem CSS verwenden können:

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

Das ist ALL, das Sie benötigen, um Ihre HRs zu gestalten.

  • Funktioniert crossbrowser-, 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.
  • kein extra css - keine height, width, background-color, color, etc. beteiligt.

Nur kugelsichere bunte HRs. Es ist das einfachTM.


Bonus: Um dem HR etwas H zu geben, setzen Sie einfach den border-width als H/2.

6
kumar_harsh

wenn Sie die css-Klasse verwenden, wird sie von allen 'hr'-Tags verwendet. Wenn Sie jedoch für ein bestimmtes' hr 'möchten, verwenden Sie den folgenden Code, d. h., inline-css

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

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

<hr color="red" />
5
deepi

Ich teste auf IE, Firefox und Chrome May 2015 und dies funktioniert am besten mit den aktuellen Versionen. Es zentriert das HR und macht es 70% breit:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}
<hr class="light" />

4
Elizabeth Gee

Sie sollten die Randbreite 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 />

4
zooks

Es ist einfach und mein Favorit.

<hr style="background-color: #dd3333" />
4
Mert
hr
{
  background-color: #123455;
}

der Hintergrund ist der, den Sie ändern sollten

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

4
Ibu

Einige Browser verwenden das color-Attribut und andere das background-color-Attribut. Sicher sein:

hr{
    color: #color;
    background-color: #color;
}
3
Kyle Sletten

Da ich keinen guten Ruf habe zu kommentieren, werde ich hier ein paar Ideen geben.

wenn Sie eine variable Höhe für CSS wünschen, entfernen Sie alle Rahmen 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 wünschen, der funktioniert, wird dies funktionieren (Beispiel: Ersetzen eines Rahmens in einem :: Vorher-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 sie immer die Größe.

Dazu müssen Sie nicht display:block; einstellen.

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

    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 sie mindestens 2px hoch ist.

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 eine ausfällt, haben Sie noch eine 1px-Leitung. Besser als nichts.

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

Im schlimmsten Fall können Sie versuchen, ein <font color="blue"></font>-Tag zu verwenden und Ihr wertvolles <hr/>-Tag darin zu platzieren. Die <font></font>-Markierungsfarbe wird übernommen.

Mit dieser Methode möchten Sie WILL wie folgt vorgehen: <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 finden Sie einen Link zum Überprüfen: http://jsfiddle.net/sna2D/

2
Ismael Miguel
  1. Code funktioniert für ältere IE
  2. Für viele Farben versucht

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

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

Zuerst habe ich id="myHR" dem 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";
0
Murtaza

Sie könnten das tun:

hr {
  border: 1px solid red;
}
<hr />
This s a test
<hr />

0
Aseel

Ich nahm eine Wette auf jede Weise:

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

Die Verwendung von Schriftfarben zum Ändern horizontaler Regeln macht sie flexibler und benutzerfreundlicher. 

Die color-Eigenschaft wird standardmäßig nicht vererbt. Daher muss zu hrs Folgendes 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">

0
Larry

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

hr {
    border-top:0;
    color: #123455;
}
<hr noshade />
This s a test
<hr noshade />

0
pacos

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

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.

0
user2689252

In der Regel können Sie die Farbe einer horizontalen Linie nicht einfach mit CSS einstellen, wie Sie es auch sonst tun würden. Zunächst benötigt Internet Explorer die Farbe in Ihrem CSS, um folgendermaßen 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, da sonst die Standardhöhe, -breite und -farbe standardmäßig von Ihrem Browser festgelegt wird. 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 fügen den Stil einfach direkt zu Ihrer HTML-Seite hinzu, wenn Sie eine horizontale Linie einfügen: 

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

Hoffe das hilft. 

0
Aubrey Love