Czy istnieje łatwy sposób na zmianę koloru punktora na liście?

Question

Czy istnieje łatwy sposób na zmianę koloru punktora na liście?

Chcę tylko zmienić kolor kuli na jasnoszary. Domyślnie jest czarny i nie mogę wymyślić, jak to zmienić.

Wiem, że przydałby mi się obrazek; wolałbym tego nie robić, jeśli mogę mu pomóc.

81

html css html-lists

Author: BoltClock, 2008-09-17

Source

16 answers

Udało mi się to bez dodawania znaczników, ale zamiast tego użyłem li: before. To oczywiście ma wszystkie ograniczenia :before (Brak starego wsparcia IE), ale wydaje się działać z IE8, Firefox i Chrome po bardzo ograniczonych testach. Działa w naszym środowisku kontrolerów, zastanawiając się, czy ktoś mógłby to sprawdzić. Styl bullet jest również ograniczony przez to, co jest w 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>

44

Author: Marc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-10 00:30:25

To było niemożliwe w 2008 roku, ale to staje się możliwe wkrótce (miejmy nadzieję)!

Zgodnie ze specyfikacją W3C CSS3 , możesz mieć pełną kontrolę nad dowolną liczbą, glifem lub innym symbolem wygenerowanym przed elementem listy z pseudoelementem ::marker. Aby zastosować to do najczęściej głosowanego rozwiązania odpowiedzi:

<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

Zauważ jednak, że od lipca 2016 r. To rozwiązanie jest tylko częścią projektu roboczego W3C i nie działa w żadnych większych przeglądarek.

Jeśli chcesz tę funkcję, wykonaj następujące czynności:

16

Author: Supuhstar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-04 21:34:26

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

Dużym problemem tej metody jest dodatkowy znacznik. (znacznik span)

5

Author: Jonathan Arkell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 20:27:05

Witam może ta odpowiedź jest spóźniona ale jest poprawna aby to osiągnąć.

Ok faktem jest, że musisz podać wewnętrzny znacznik, aby tekst listy był na zwykłej czerni (lub cokolwiek chcesz go uzyskać). Ale prawdą jest również, że możesz przedefiniować wszelkie tagi i tagi wewnętrzne za pomocą CSS. Tak więc najlepszym sposobem na to jest użycie krótszego znacznika dla 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; }

I ten kod html:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

Otrzymujesz wymagany wynik. Również można niech każdy dysk ma inny kolor:

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

2

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-05 06:21:40

Wystarczy zrobić bullet w programie graficznym i użyć list-style-image:

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

2

Author: ghr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-19 22:11:00

Zawiń tekst wewnątrz elementu listy za pomocą span (lub innego elementu) i zastosuj kolor punktora do elementu listy i kolor tekstu do span.

0

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 20:27:43

Zgodnie z W3C spec ,

Właściwości listy ... nie zezwalaj autorom na określanie odrębnego stylu (kolory, czcionki, wyrównanie itp.) dla znacznika listy ...

Ale pomysł z rozpiętością wewnątrz powyższej listy powinien działać dobrze!

0

Author: Aeon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 20:29:26

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

0

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 20:44:38

Możesz użyć Jquery, jeśli masz dużo stron i nie musisz edytować znaczników samodzielnie.

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

0

Author: alaasdk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-05 20:34:05

Na pytanie z 2008 roku, pomyślałem, że mogę dodać nowszą i aktualną odpowiedź na temat tego, jak możesz zmienić kolor kul na liście.

Jeśli chcesz korzystać z zewnętrznych bibliotek, Font Awesome daje skalowalne ikony wektorowe , a w połączeniu z klasami pomocniczymiBootstrap (np. text-success), możesz tworzyć całkiem fajne i konfigurowalne listy.

Rozbudowałem fragment z Strony przykładowej listy czcionek poniżej:

Użyj fa-ul i fa-li, aby łatwo zastąpić domyślne punktory na listach nieuporządkowanych.

<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 (głównie) obsługuje IE8 , i obsługuje tylko IE7, jeśli używasz starszej wersji 3.2.1 .

0

Author: eggy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-25 03:47:45

Działa również, jeśli ustawimy kolor dla każdego elementu na przykład: / Align = "left" /

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

0

Author: Mohammed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-16 14:14:48

Możesz użyć CSS, aby to osiągnąć. Określając listę w wybranym kolorze i stylu, Możesz również określić tekst jako inny kolor.

Wykonaj przykład na http://www.echoecho.com/csslists.htm .

-1

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 20:53:30

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

One

Dwa

Trzy

-1

Author: NerdFury,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-16 16:05:51

Po prostu użyj CSS:

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

-2

Author: Diodeus - James MacFarlane,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 20:28:17

Będziesz chciał ustawić" styl listy " za pomocą CSS i nadać mu wartość color:. Przykład:

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

-5

Author: ahockley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-10 00:30:33

score 154 · Accepted Answer

Kula nabiera koloru z tekstu. Więc jeśli chcesz mieć punktor w innym kolorze niż tekst na liście, musisz dodać kilka 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 */
}