Best IT Recipes

Is there an easy way to change the color of a bullet in a list?

All I want to do is change the color of the bullet in the list to light gray. By default, it is black, and I cannot figure out how to change it.

I know that I can just use the image; I do not want to do this if I can help.

+74
html css html-lists
Sep 16 '08 at 20:23
source share
16 answers

The bullet gets its color from the text. Therefore, if you want to have a different color mark than the text in your list, you will have to add some markup.

Wrap the list text in the range:

<ul> <li><span>item #1</span></li> <li><span>item #2</span></li> <li><span>item #3</span></li> </ul>

Then change your style rules a bit:

 li { color: red; /* bullet color */ } li span { color: black; /* text color */ }
+146
Sep 16 '08 at 20:28
source share

I succeeded without adding markup, but instead I used li: before. Obviously, it has all the limitations :before (without the old IE support), but it seems to work with IE8, Firefox, and Chrome after very limited testing. He works in our environment with a controller, wondering if anyone can verify this. The style of the bullet is also limited by what is in 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>
+43
Nov 26 '10 at 21:14
source share

This was not possible in 2008, but soon became possible (hopefully)!

According to the W3C CSS3 Specification , you can have full control over any number, character or other character generated before a list item using the ::marker pseudo-element. To apply this to most voting decisions:

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

JSFiddle example

Please note, however, that as of July 2016 , this solution is only part of the W3C working draft and does not work in any major browsers.

If you want this feature, follow these steps:

+16
Apr 16 '13 at 15:10
source share
 <ul> <li style="color: #888;"><span style="color: #000">test</span></li> </ul>

The big problem with this method is the extra markup. (span tag)

+4
Sep 16 '08 at 20:27
source share

Hi, maybe this answer is delayed, but it is correct to achieve this.

Well, the fact is that you have to specify an internal tag so that the LIst text is on plain black (or whatever you want to get). But it’s also true that you can reinstall any TAGS and internal tags using CSS. So the best way to do this is using the SHORTER tag to override

Sort this CSS definition:

 li { color: red; } li b { color: black; font_weight: normal; } .c1 { color: red; } .c2 { color: blue; } .c3 { color: green; }

And this html code:

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

You get the desired result. You can also make each disk a different color:

 <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
Jul 05 '09 at 6:21
source share

Just make a bullet in the graphics program and use list-style-image :

 ul { list-style-image:url('gray-bullet.gif'); }
+2
Apr 19 '12 at 22:11
source share

Wrap the text in the list item with a range (or another item) and apply the color of the bullet to the list item and the color of the text to the range.

0
Sep 16 '08 at 20:27
source share

According to the specification of W3C ,

List properties ... do not allow authors to specify a separate style (colors, fonts, alignment, etc.) for the list marker ...

But the idea with a span inside the list above should work fine!

0
Sep 16 '08 at 20:29
source share
 <ul> <li style="color:#ddd;"><span style="color:#000;">List Item</span></li> </ul>
0
Sep 16 '08 at 20:34
source share

You can use jquery if you have many pages and you don’t have to go and edit your markup.

here is a simple example:

 $("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
Jan 05 '13 at
source share

In the 2008 question, I thought that I could add a more recent and relevant answer on how you can change the color of the markers in the list.

If you want to use external libraries, Font Awesome gives you scalable vector icons and, in combination with Bootstrap Helper classes (like text-success ), you can create pretty interesting and custom lists.

I have expanded the extraction of the Awesome font list example page below:

Use fa-ul and fa-li to easily replace the default tokens in unordered lists.

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

The Awesome font (mostly) supports IE8 and only supports IE7 if you are using an earlier version 3.2.1 .

0
Nov 25 '15 at 3:47
source share

It also works if we set a color for each element, for example: I added a bit of margin to the 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
Jun 15 '17 at 12:57
source share
 <ul style="color: red;"> <li>One</li> <li>Two</li> <li>Three</li> </ul>
One two Three
-one
Sep 16 '08 at 20:29
source share

You can use CSS to achieve this. By specifying a list in your chosen color and style, you can also specify the text as a different color.

Follow the example http://www.echoecho.com/csslists.htm .

-one
Sep 16 '08 at 20:53
source share

Just use CSS:

 <li style='color:#e0e0e0'>something</li>
-2
Sep 16 '08 at 20:28
source share

You need to set the “list style” using CSS and set it to color: value. Example:

 ul.colored {list-style: color: green;}
-5
Sep 16 '08 at 20:28
source share


More articles:


All Articles