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.
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.
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.
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.
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 */ }
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With