Zmienić kolor punktora na liście html?

Question 1

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

Question 2

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

Question 3

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>

Question 4

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

Przykład JSFiddle

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:

Question 5

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

Question 6

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>

Question 7

Po prostu zrób punktor w programie graficznym i użyj list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}

Question 8

Zawiń tekst w elemencie listy rozpiętością (lub jakimś innym elementem) i zastosuj kolor punktora do elementu listy, a kolor tekstu do zakresu.

Question 9

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!

Question 10

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

Question 11

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

Question 12

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>

Rozwiń fragment

Font Awesome (w większości) obsługuje IE8 i obsługuje tylko IE7, jeśli używasz starszej wersji 3.2.1 .

Question 13

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

Question 14

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 .

Question 15

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Jeden

Dwa

Trzy

Question 16

Po prostu użyj CSS:

<li style='color:#e0e0e0'>something</li>

Question 17

Będziesz chciał ustawić „styl listy” przez CSS i nadać mu kolor: wartość. Przykład:

ul.colored {list-style: color: green;}

Answer 1

86

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

html css html-lists Dave Haynes
źródło

Po prostu poszedłbym z obrazem i unikał dodatkowych znaczników. To prawdopodobnie bardziej wydajne rozwiązanie

Sam Murray-Sutton,

8

Kogo obchodzą takie „dodatkowe” znaczniki ... poważnie, nic nie tracisz, robiąc to.

Answer 2

Po prostu poszedłbym z obrazem i unikał dodatkowych znaczników. To prawdopodobnie bardziej wydajne rozwiązanie

Sam Murray-Sutton,

Answer 3

8

Kogo obchodzą takie „dodatkowe” znaczniki ... poważnie, nic nie tracisz, robiąc to.

Answer 4

159

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

Prestaul
źródło

Dokładnie to, czego potrzebowałem! Mam listę linków, które i tak mają już zastosowany inny styl kolorów.

Dave Haynes,

To nie jest najlepszy sposób na zrobienie tego. Na przykład to nie zadziała, gdy masz wokół siebie cms z edytorem WYSIWYG. Elementy nie zostaną wyrenderowane. To, co możesz chcieć, to popracować: przed i: po i pominąć same byki. W rzeczywistości jest to bardzo zła praktyka.

Automagisch,

2

@KoenHoutman, w momencie pisania tego (2008) była to jedyna technika z rozsądnym wsparciem. Nawet dzisiaj nie jest to zła praktyka i nadal jest to technika z najszerszą obsługą przeglądarek, chociaż zgadzam się, że dzisiaj (w większości przypadków) wybrałbym użycie :beforetak, jak w odpowiedzi Marca poniżej.

Prestaul

Ponieważ zmieniasz tylko prezentację tekstu, btag byłby bardziej odpowiedni.

Supuhstar

Answer 5

Dokładnie to, czego potrzebowałem! Mam listę linków, które i tak mają już zastosowany inny styl kolorów.

Dave Haynes,

Answer 6

To nie jest najlepszy sposób na zrobienie tego. Na przykład to nie zadziała, gdy masz wokół siebie cms z edytorem WYSIWYG. Elementy nie zostaną wyrenderowane. To, co możesz chcieć, to popracować: przed i: po i pominąć same byki. W rzeczywistości jest to bardzo zła praktyka.

Automagisch,

Answer 7

2

@KoenHoutman, w momencie pisania tego (2008) była to jedyna technika z rozsądnym wsparciem. Nawet dzisiaj nie jest to zła praktyka i nadal jest to technika z najszerszą obsługą przeglądarek, chociaż zgadzam się, że dzisiaj (w większości przypadków) wybrałbym użycie :beforetak, jak w odpowiedzi Marca poniżej.

Prestaul

Answer 8

Ponieważ zmieniasz tylko prezentację tekstu, btag byłby bardziej odpowiedni.

Supuhstar

Answer 9

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>

Answer 10

Jest to bardziej nowocześniejszy sposób w przypadku CSS3 w porównaniu z akceptowaną odpowiedzią

minni

Answer 11

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

Przykład JSFiddle

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:

Answer 12

6

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

Jonathan Arkell
źródło

Ponieważ zmieniasz tylko prezentację tekstu, btag byłby bardziej odpowiedni.

Supuhstar

1

Kiedy to zostało napisane, znacznik b był w trakcie wycofywania i zastąpienia znacznikiem mocnym. Ale tak, masz rację, teraz tag ab byłby bardziej odpowiedni.

Jonathan Arkell

Answer 13

Ponieważ zmieniasz tylko prezentację tekstu, btag byłby bardziej odpowiedni.

Supuhstar

Answer 14

1

Kiedy to zostało napisane, znacznik b był w trakcie wycofywania i zastąpienia znacznikiem mocnym. Ale tak, masz rację, teraz tag ab byłby bardziej odpowiedni.

Jonathan Arkell

Answer 15

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>

Answer 16

należy użyć . również jest przestarzałe.

the_drow,

Answer 17

2

Punkt kontrowania dla @the_drow, nie jest przestarzały. stackoverflow.com/questions/1348683/…

Strixy,

Answer 18

Ustawienie domyślnego koloru zastosowanego do określonego selektora rozwiązało mój problem. Dziękuję za tę wskazówkę.

David

Answer 19

2

Po prostu zrób punktor w programie graficznym i użyj list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}

ghr
źródło

1

OP wyraźnie nie chciał użyć zdjęcia, ale natknąłem się na to, szukając ogólnego sposobu na zastąpienie pocisku. Więc myślę, że ta odpowiedź jest miła dla kompletności.

Zane

Oto jeden z okręgiem SVG, który można łatwo pokolorować:

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

Ciantic

Answer 20

1

OP wyraźnie nie chciał użyć zdjęcia, ale natknąłem się na to, szukając ogólnego sposobu na zastąpienie pocisku. Więc myślę, że ta odpowiedź jest miła dla kompletności.

Zane

Answer 21

Oto jeden z okręgiem SVG, który można łatwo pokolorować:

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

Ciantic

Answer 22

0

Zawiń tekst w elemencie listy rozpiętością (lub jakimś innym elementem) i zastosuj kolor punktora do elementu listy, a kolor tekstu do zakresu.

źródło

Answer 23

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!

Answer 24

0

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

źródło

Answer 25

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

Answer 26

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>

Rozwiń fragment

Font Awesome (w większości) obsługuje IE8 i obsługuje tylko IE7, jeśli używasz starszej wersji 3.2.1 .

Answer 27

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

Answer 28

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 .

Answer 29

-1

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Jeden

Dwa

Trzy

NerdFury
źródło

Answer 30

-2

Po prostu użyj CSS:

<li style='color:#e0e0e0'>something</li>

Diodeus - James MacFarlane
źródło

Tak też myślałem ... ale stylizacja li color zmienia kolor tekstu, a także kolor punktora.

Aeon,

Answer 31

Tak też myślałem ... ale stylizacja li color zmienia kolor tekstu, a także kolor punktora.

Aeon,

Answer 32

-5

Będziesz chciał ustawić „styl listy” przez CSS i nadać mu kolor: wartość. Przykład:

ul.colored {list-style: color: green;}

ahockley
źródło

Zmienić kolor punktora na liście html?

Odpowiedzi: