Zmiana koloru elementu hr

Chcę zmienić kolor mojego hrtagu za pomocą CSS. Kod, który wypróbowałem poniżej, nie działa:

hr {
    color: #123455;
}

Myślę, że powinieneś użyć border-colorzamiast tego color, jeśli masz zamiar zmienić kolor linii produkowanej przez <hr>tag.

Chociaż w komentarzach zaznaczono, że jeśli zmienisz rozmiar linii, ramka będzie nadal tak szeroka, jak określono w stylach, a linia zostanie wypełniona domyślnym kolorem (co nie jest pożądanym efektem większości czas). Wygląda więc na to, że w tym przypadku należałoby również określić background-color(jak sugerował @Ibu w swojej odpowiedzi).

Projekt HTML 5 Boilerplate w domyślnym arkuszu stylów określa następującą zasadę:

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

Artykuł zatytułowany „12 mało znanych faktów CSS” , opublikowany niedawno przez SitePoint, wspomina o tym, że <hr>można go ustawić border-colorjako nadrzędny, colorjeśli go określisz hr { border-color: inherit }.

• border-colordziała w Chrome i Safari .
• background-color działa w Firefox i Opera.
• colordziała w IE7 + .

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

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

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

Wykonanie tej czynności pozwala w razie potrzeby zmienić wysokość. Powodzenia. Źródło: Jak stylizować HR za pomocą CSS

Testowane w Firefox, Opera, Internet Explorer, Chrome i Safari.

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

Zobacz skrzypce .

Wystarczy tylko obramowanie z kolorem, aby linia była w innym kolorze.

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

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

Dzięki temu reguła pozioma będzie gruba 1px, a jednocześnie zmieni się jej kolor

Uważam, że jest to najbardziej skuteczne podejście:

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

Lub jeśli wolisz robić to na wszystkich elementach HR, napisz to na swoim CSS:

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

godz
{
kolor: # f00;
kolor tła: # f00;
wysokość: 5 pikseli;
}

hr
{
  background-color: #123455;
}

tło należy zmienić

Możesz także pracować z kolorem ramek. nie jestem pewien, czy myślę, że są z tym problemy z przeglądarką. powinieneś przetestować to w różnych przeglądarkach

jeśli używasz klasy css, to zostaną one zajęte przez wszystkie tagi „hr”, ale jeśli chcesz dla konkretnego „hr” użyj poniższego kodu, tj. wbudowanego css

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

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

<hr color="red" />

Po przeczytaniu wszystkich odpowiedzi tutaj i zobaczeniu opisanej złożoności, postanowiłem trochę oderwać się od eksperymentów z HR. Konkluzja jest taka, że ​​możesz wyrzucić większość napisanego przez siebie CSS, przeczytaj ten mały elementarz i po prostu korzystać z tych dwóch linii czystego CSS:

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

To wszystko czego potrzebujesz, aby stylizować swoje HR.

• Działa w różnych przeglądarkach, na różnych urządzeniach, w różnych systemach operacyjnych, w różnych językach.
• Nie „Myślę, że to zadziała ...” , „musisz pamiętać o Safari / IE…” itp.
• bez dodatkowych css - no height, width, background-color, color, itd zaangażowany.

Po prostu kuloodporne kolorowe HR. To taka prosta ^TM .

Premia: Aby nadać HR pewien wzrost H, wystarczy ustawić border-widthjako H/2.

Niektóre przeglądarki używają coloratrybutu, a niektóre korzystają z background-coloratrybutu. Być bezpiecznym:

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

Testuję na IE, Firefox i Chrome w maju 2015 r. I to działa najlepiej z bieżącymi wersjami. Centruje HR i czyni go 70% szerokim:

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

<hr class="light" />

Powinieneś ustawić szerokość ramki na 0; Działa dobrze w Firefox 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" />

Możesz dodać klasę bootstrap bg jak

<hr class="bg-light" />

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

jeśli chcesz zmiennej wysokości css, zdejmij 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, o którym wiesz, że będzie działał (na przykład: zastąpienie ramki w elemencie :: before dla większości klientów 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 trzeba tego ustawiać display:block;.

Aby być całkowicie bezpiecznym, możesz mieszać oba, ponieważ niektóre przeglądarki mogą się mylić 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 mieć pewność, że będzie miała co najmniej 2 piksele wysokości.

To coś więcej, ale bezpieczeństwo to bezpieczeństwo.

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

Pamiętaj: Gmail wykrywa tylko wbudowane css, a niektóre klienty e-mail mogą nie obsługiwać tła ani obramowań. Jeśli jeden zawiedzie, nadal będziesz mieć linię 1px. Lepsze niż nic.

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

W najgorszym z najgorszych przypadków możesz spróbować użyć <font color="blue"></font>tagu i umieścić w nim swój cenny <hr/>tag. Dziedziczy <font></font>kolor tagu.

Dzięki tej metodzie, to BĘDZIE chce 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ę w innym kolorze, przykład może wyglądać tak:

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 Javie, ale wypróbowałem swó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 .

Przede wszystkim id="myHR"podałem element HR i wykorzystał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. Próbowałem wielu kolorów

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

Używanie kolorów czcionek do modyfikowania reguł poziomych czyni je bardziej elastycznymi i łatwymi w użyciu.

colorNieruchomość nie jest dziedziczona domyślnie, więc poniższe musi zostać dodany do WP, aby umożliwić dziedziczenie koloru:

/* 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ć <hr noshade>tag i przejść do pliku css i dodać:

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

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

Zasadą ogólną jest to, że nie można ustawić koloru poziomej linii za pomocą CSS, tak jak w przypadku innych elementów. Po pierwsze, Internet Explorer potrzebuje koloru w twoim CSS, aby czytać w następujący sposób:

„Kolor: # 123455”

Ale Opera i Mozilla potrzebują koloru w twoim CSS, aby czytać w ten sposób:

„Kolor tła: # 123455”

Musisz dodać obie opcje do swojego CSS.

Następnie musisz nadać linii poziomej pewne wymiary, w przeciwnym razie domyślna wysokość, szerokość i kolor będą ustawione domyślnie w przeglądarce. Oto przykładowy kod tego, 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 swojej strony HTML bezpośrednio po wstawieniu poziomej linii, tak jak to:

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

Mam nadzieję że to pomoże.

Postawiłem na każdy sposób:

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