Zmiana koloru elementu hr

border-color działa w Chrome i Safari
background-color działa w Firefoksie i operze
color działa w IE7 +

Myślę, że to może być przydatne. to był prosty selektor CSS.

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

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

Robi to w ten sposób pozwala na zmianę wysokości w razie potrzeby. Powodzenia. Źródło: Jak stylizować HR za pomocą CSS

Testowane w ff, opera, ie, chrome i safari

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

Zobacz skrzypce http://jsfiddle.net/HPSjU/

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

To utrzyma poziomą regułę 1px grubą, jednocześnie zmieniając jej kolor

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

Tylko border-top z kolorem wystarczy, aby linia była w innym kolorze.

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

Uważam, że jest to najskuteczniejsze podejście:

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

Lub jeśli wolisz robić to na wszystkich elementach hr napisz to na sobie CSS:

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

hr
{
  background-color: #123455;
}

Tło jest tym, które powinieneś zmienić

Możesz również pracować z kolorem obramowań. nie jestem pewien, czy są z tym problemy związane z krzyżówką. należy go przetestować w przeglądarkach differrent

Jeśli u używasz klasy css, to zostanie ona pobrana przez wszystkie znaczniki 'hr', ale jeśli chcesz dla konkretnego 'hr' użyj poniższego kodu, tzn. inline css

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

Jeśli to nie działa w chrome spróbuj poniżej kodu:

<hr color="red" />

Testuję na IE, Firefox i Chrome maja 2015 i działa to najlepiej z aktualnymi wersjami. To centruje HR i sprawia, że 70% szerokości:

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

<hr class="light" />

Należy ustawić border-width na 0; działa dobrze w Firefoksie i Chrome.

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

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

To proste i moje ulubione.

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

Niektóre przeglądarki używają atrybutu color, a inne atrybutu background-color. "Być bezpiecznym": {]}

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

Po przeczytaniu wszystkich odpowiedzi tutaj, i widząc złożoność opisane, ustawiłem się na małą dywersję do eksperymentowania z HR. i, wniosek jest taki, że można wyrzucić większość monkeypatched CSS napisałeś, przeczytaj ten mały primer i po prostu użyć tych dwóch linii czystego CSS: {11]}

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

To jest Wszystko musisz stylizować swoje godziny.

• Działa między przeglądarkami, między urządzeniami, między systemami operacyjnymi, między kanałami angielskimi, między wiekami.
• Nie " I myślę, że to zadziała...", "musisz pamiętać o Safari/IE...", itd.
• no extra css-no height, width, background-color, color, itd. zaangażowany.

Po prostu kuloodporne kolorowe HRs. To to proste ^TM .

Bonus: aby nadać HR jakąś wysokość H, ustaw border-width jako H/2.

Ponieważ nie mam reputacji do komentowania, podam tutaj kilka pomysłów.

Jeśli chcesz mieć zmienną CSS height, usuń wszystkie obramowania i podaj kolor tła.

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

Jeśli chcesz po prostu styl, który wiesz, że będzie działać (przykład: aby zastąpić ramkę w elemencie:: before dla większości klientów poczty e-mail lub

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

W obu przypadkach, jeśli ustawisz szerokość, zawsze będzie miała swój rozmiar.

Nie ma potrzeby ustawiania display:block; do tego.

Być całkowicie bezpiecznym, można mieszać oba, ponieważ niektóre przeglądarki mogą być mylone z height:0px;:

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

Dzięki tej metodzie możesz być pewien, że będzie miała co najmniej 2px wysokości.

To linia bardziej, ale bezpieczeństwo to bezpieczeństwo.

Jest to metoda, której powinieneś użyć, aby być kompatybilnym z prawie wszystkim.

Pamiętaj: Gmail wykrywa tylko wbudowany css, a niektórzy klienci poczty e-mail mogą nie obsługiwać tła lub obramowań. Jeśli jeden się nie powiedzie, nadal będziesz mieć linię 1px. Lepiej niż nic.

W najgorszych przypadkach możesz spróbować dodać color:blue;.

W najgorszych przypadkach możesz spróbować użyć znacznika <font color="blue"></font> i umieścić w nim swój cenny znacznik <hr/>. Będzie dziedziczyć kolor znacznika <font></font>.

Dzięki tej metodzie, będziesz chciał zrobić tak: <hr width="50" align="left"/>.

Przykład:

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

Oto link do sprawdzenia: http://jsfiddle.net/sna2D/

Możesz użyć CSS, aby utworzyć linię o innym kolorze, przykład będzie taki:

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

Ten kod wyświetli pionową szarą linię.

Cóż, jestem nowy w HTML, CSS i Java, ale próbowałem mój sposób, który działał dla mnie we wszystkich przeglądarkach. Użyłem JS zamiast CSS , który nie działa z niektórymi przeglądarkami.

Po pierwsze dałem id="myHR" elementowi HR i użyłem go w Java Script.
Oto Kod.

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. Kod działa dla starszych IE

2. Wypróbowane Dla Wielu Kolorów

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

Używanie kolorów czcionek do modyfikacji poziomych reguł sprawia, że są one bardziej elastyczne i łatwe w użyciu.

Właściwość color nie jest dziedziczona domyślnie, więc aby umożliwić dziedziczenie kolorów, do hr należy dodać następujące elementy:

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

Możesz to zrobić:

hr {
  border: 1px solid red;
}

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

Możesz podać tag <hr noshade> i przejść do pliku css i dodać:

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

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

Ogólnie rzecz biorąc, nie możesz po prostu ustawić koloru poziomej linii za pomocą CSS, tak jak Wszystko inne. Po pierwsze, Internet Explorer potrzebuje koloru w CSS, aby czytać w ten sposób:

"color: #123455"

Ale Opera i Mozilla potrzebują koloru w CSS, aby czytać tak:

"background-color: #123455"

Więc musisz dodać obie opcje do CSS.

Następnie musisz podać poziomą linię jakieś wymiary lub będzie ona domyślnie do standardowej wysokości, szerokości i koloru ustawionej przez przeglądarkę. Oto przykładowy kod, jak powinien wyglądać twój CSS, aby uzyskać niebieską poziomą linię.

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

Lub możesz po prostu dodać styl do strony HTML bezpośrednio po wstawieniu poziomej linii, tak:

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

Możesz też użyć znacznika czcionki For eg

<font color="red"><hr></font>