Chcę tylko móc zmienić kolor punktora na liście na jasnoszary. Domyślnie jest czarny i nie wiem, jak to zmienić.
Wiem, że mógłbym po prostu użyć obrazu; Wolałbym tego nie robić, jeśli mogę temu zaradzić.
Odpowiedzi:
Punktor pobiera swój kolor z tekstu. Więc jeśli chcesz mieć punktor w innym kolorze niż tekst na liście, musisz dodać trochę znaczników.
Zawiń tekst listy w zakres:
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
Następnie zmodyfikuj nieco zasady stylu:
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
:beforetak, jak w odpowiedzi Marca poniżej.
btag byłby bardziej odpowiedni.
Udało mi się to bez dodawania znaczników, ale zamiast tego używałem li: wcześniej. To oczywiście ma wszystkie ograniczenia :before(brak starej obsługi IE), ale wydaje się, że działa z IE8, Firefox i Chrome po kilku bardzo ograniczonych testach. Działa w naszym środowisku kontrolera, zastanawiając się, czy ktoś mógłby to sprawdzić. Styl punktora jest również ograniczony przez zawartość Unicode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
li {
list-style: none;
}
li:before {
/* For a round bullet */
content:'\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -10px;
top: -0px;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>
To było niemożliwe w 2008 roku, ale wkrótce stanie się to możliwe (miejmy nadzieję)!
Zgodnie ze specyfikacją W3C CSS3 , możesz mieć pełną kontrolę nad dowolną liczbą, glifem lub innym symbolem generowanym przed pozycją listy z ::markerpseudoelementem. Aby zastosować to do rozwiązania z największą liczbą głosów:
<ul>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>
li::marker {
color: red; /* bullet color */
}
li {
color: black /* text color */
}
Należy jednak pamiętać, że stan na lipiec 2016 r roku to rozwiązanie jest tylko częścią wersji roboczej W3C i nie działa jeszcze w żadnej z głównych przeglądarek.
Jeśli chcesz tę funkcję, wykonaj następujące czynności:
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
dużym problemem związanym z tą metodą jest dodatkowy znacznik. (tag span)
btag byłby bardziej odpowiedni.
Witam, może ta odpowiedź jest spóźniona, ale jest właściwa, aby to osiągnąć.
Ok, faktem jest, że musisz określić wewnętrzny znacznik, aby tekst LIst był na zwykłym czarnym tle (lub cokolwiek chcesz go uzyskać). Ale prawdą jest również, że możesz PRZEDEFINIOWAĆ dowolne TAGI i tagi wewnętrzne za pomocą CSS. Dlatego najlepszym sposobem na to jest użycie tagu SHORTER do redefinicji
Użyj tej definicji CSS:
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
A ten kod html:
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
Otrzymasz wymagany wynik. Możesz również ustawić każdy dysk w innym kolorze:
<ul>
<li class="c1"><b>Text 1</b></li>
<li class="c2"><b>Text 2</b></li>
<li class="c3"><b>Text 3</b></li>
</ul>
Po prostu zrób punktor w programie graficznym i użyj list-style-image:
ul {
list-style-image:url('gray-bullet.gif');
}
list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");
Zawiń tekst w elemencie listy rozpiętością (lub jakimś innym elementem) i zastosuj kolor punktora do elementu listy, a kolor tekstu do zakresu.
Zgodnie ze specyfikacją W3C ,
Właściwości listy ... nie pozwalają autorom na określenie odrębnego stylu (kolorów, czcionek, wyrównania itp.) Dla znacznika listy ...
Ale pomysł z rozpiętością na powyższej liście powinien działać dobrze!
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
Możesz użyć Jquery, jeśli masz wiele stron i nie musisz samodzielnie edytować znaczników.
oto prosty przykład:
$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
W przypadku pytania z 2008 r. Pomyślałem, że mógłbym dodać nowszą i aktualną odpowiedź na temat tego, jak można zmienić kolor punktorów na liście.
Jeśli chcesz korzystać z bibliotek zewnętrznych, Font Awesome udostępnia skalowalne ikony wektorowe , aw połączeniu z klasami pomocniczymi Bootstrap (np.text-success ), Możesz stworzyć całkiem fajne i konfigurowalne listy.
Rozwinąłem fragment poniższej strony z przykładami listy Font Awesome :
Użyj
fa-uli,fa-liaby łatwo zastąpić domyślne punktory na nieuporządkowanych listach.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="fa-ul">
<li><i class="fa-li fa fa-circle"></i>List icons</li>
<li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
<li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>Font Awesome (w większości) obsługuje IE8 i obsługuje tylko IE7, jeśli używasz starszej wersji 3.2.1 .
Działa również, jeśli ustawimy kolor dla każdego elementu, na przykład: dodałem teraz margines do lewej.
<article class="event-item">
<p>Black text here</p>
</article>
.event-item{
list-style-type: disc;
display: list-item;
color: #ff6f9a;
margin-left: 25px;
}
.event-item p {
margin: 0;
color: initial;
}
Możesz użyć CSS, aby to osiągnąć. Określając listę w wybranym kolorze i stylu, możesz następnie określić tekst w innym kolorze.
Postępuj zgodnie z przykładem na http://www.echoecho.com/csslists.htm .
Po prostu użyj CSS:
<li style='color:#e0e0e0'>something</li>