Zmiana koloru elementu hr

778

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

hr {
    color: #123455;
}
koool
źródło
1
Po prostu próbowałem zrobić to, co zrobiłeś z innym kolorem i działa to w Firefox 5 Beta, ale nie w IE 9, jsfiddle.net/TGtSd
6
@Keoki Zee Nie działa dla mnie (Chrome).
Marty
1
@Marty Kolor tła działa w Chrome, ale masz rację, nie kolor ... dziwne ...
2
chrom nie działa kolor tła też nie działa dla mnie
koool
2
Okej, na wypadek, gdyby ktoś chciał przetestować, oto skrzypce, do której do tej pory się udałem , jsfiddle.net/TGtSd/9 ...

Odpowiedzi:

1125

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

Anton Strogonoff
źródło
6
Problem z kolorem obramowania polega na tym, że jeśli powiększysz godzinę, to po prostu pokoloruje ramkę, jsfiddle.net/TGtSd/9 ...
@Anton nie o to mi chodziło w kwestii wielkości godziny ... jeśli zwiększysz wysokość, a użyjesz tylko koloru obramowania, otrzymasz prostokąt z kolorową ramką, ale wnętrze nie będzie kolorowe ...
Po co w ogóle zawracać sobie głowę granicą? Dlaczego nie nadać mu koloru tła i skończyć z nim? Edycja: nvm, nie widziałem odpowiedzi na temat zgodności przeglądarki.
Adwokat
119
  • border-colordziała w Chrome i Safari .
  • background-color działa w Firefox i Opera.
  • colordziała w IE7 + .
Cameron
źródło
10
Jeśli chcemy, aby nasza strona była wyświetlana we wszystkich przeglądarkach, czy powinniśmy korzystać z nich wszystkich?
MEM
4
border-color nie działa w Chrome. Spróbuj ustawić kolor biały na białym tle. Te dwa będą działać: albo 1) color:white; border-style:solid; albo 2) border-color:white; border-style:solid; .
Pacerier
4
@Pacerier tak to robi. Może trzeba określić styl i / lub szerokość
GôTô
informacje dotyczące IE (przynajmniej) jest niepoprawny. „kolor obramowania” działa dobrze w IE; „Kolor” nie (IE11)
taiji123
88

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

hr { background-color: red; height: 1px; border: 0; }
Omm
źródło
2
To zdecydowanie działało dla mnie na pulpicie chrome: <style> hr {background-color: red; wysokość: 1px; granica: 0; } </style> <hr>
Michael d
Działa dla mnie zarówno w chrome, jak i firefoxie
Robert C
46
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

Studio3
źródło
25

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

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

Zobacz skrzypce .

Eric Fortis
źródło
11

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

hr {
    border-top: 1px solid #ccc;
}
Kathir
źródło
10
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

Brian McCall
źródło
Najlepsza odpowiedź tutaj. Ustawienie wysokości na 0px i dodanie ramki nie powoduje, że hr ma 2 piksele szerokości. Świetne połączenie !!
Bob Roberts,
9

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;
}
Joao Alves Marrucho
źródło
8
godz
{
kolor: # f00;
kolor tła: # f00;
wysokość: 5 pikseli;
}
Sushil Bharwani
źródło
5
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

Ibu
źródło
2
Próbowałem w Firefox 5 Beta, IE 9, Chrome, Opera i Safari ... jesteś dobry, wszystkie działają;)
1
@kool, która część nie działa? kolor tła? czy kolor obramowania? właśnie przetestowałem kolor obramowania: niebieski; i działało to w chromie
Ibu
[kolor obramowania] działa w Chrome. [kolor tła] nie. Oddałbym głos, gdybym miał wystarczającą liczbę przedstawicieli.
samthebrand,
5

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" />
deepi
źródło
5

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.

kumarharsh
źródło
Postawiłem na każdy zakład: `` hr {border-top: 1px solid purple; kolor obramowania: fioletowy; kolor tła: fioletowy; kolor fioletowy; } ~~~
David Jones
Nie działa w przeglądarce Firefox, background-colordziała.
caram
4

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

hr{
    color: #color;
    background-color: #color;
}
Kyle Sletten
źródło
4

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

Elizabeth Gee
źródło
właśnie tego szukałem. Mój błąd polegał na tym, że dodałem spację między godziną a klasą w definicji css (hr .light {})
rochasdv
4

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

Zooks
źródło
4

To proste i moje ulubione.

<hr style="background-color: #dd3333" />
Mert
źródło
4

Możesz dodać klasę bootstrap bg jak

<hr class="bg-light" />
Romy Gomes
źródło
Okazuje się, że była to dla mnie idealna odpowiedź, chociaż robiłem to w przeszłości, dostosowując granicę. BTW, Bootstrap 4 robi to w ten sposób:.bg-light { background-color: #f8f9fa !important; }
nicorellius,
2

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/

Ismael Miguel
źródło
0

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ę.

użytkownik2689252
źródło
0

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";
Murtaza
źródło
0
  1. Kod działa dla starszych IE
  2. Próbowałem wielu kolorów

    <hr color="black">
    <hr color="blue">
Shivpe_R
źródło
0

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

Larry
źródło
0

Możesz to zrobić:

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

Aseel
źródło
0

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

pacos
źródło
0

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.

Aubrey Love
źródło
0

Postawiłem na każdy sposób:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }
David Jones
źródło