Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the color of a bullet in a html list?

All I want is to be able to change the color of a bullet in a list to a light gray. It defaults to black, and I can't figure out how to change it.

I know I could just use an image; I'd rather not do that if I can help it.

like image 532
Dave Haynes Avatar asked Sep 16 '08 20:09

Dave Haynes


People also ask

How do I change the color of a bullet in a list?

Click a bullet or number in a list. All the bullets or numbers in the list are selected. On the Home tab, in the Font group, make the changes that you want. For example, click the arrow next to Font Color, and then click the color that you want.

Can we change bullets of an HTML list?

The default bullets can be replaced with other native options or completely removed using CSS to manipulate the list-style-type property. You can even change the UL bullet to a custom image or icon.

Can you change the color of a bullet in HTML Yes or no?

The bullet gets its color from the text. So if you want to have a different color bullet than text in your list you'll have to add some markup.


2 Answers

The bullet gets its color from the text. So if you want to have a different color bullet than text in your list you'll have to add some markup.

Wrap the list text in a span:

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

Then modify your style rules slightly:

li {   color: red; /* bullet color */ } li span {   color: black; /* text color */ } 
like image 165
Prestaul Avatar answered Sep 27 '22 20:09

Prestaul


I managed this without adding markup, but instead using li:before. This obviously has all the limitations of :before (no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. It's working in our controller environment, wondering if anyone could check this. The bullet style is also limited by what's 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> 
like image 33
Marc Avatar answered Sep 27 '22 20:09

Marc