Colored Bullets
I recently came across a design that asked for colored bullets in a bullet list. One would think that there would be some sort of CSS property to allow such a thing. But alas, there isn’t. The bullets are always the color of the text. However, I refused to resort to using images for bullets when all they had to be was a different color.
After a few minutes of thinking, I came up with a solution. Just set the color of the <ul/> element to the color for the bullets, then enclose each list item’s text inside of a <span/> that specifies the text color. For example:
<ul style="color: red"> <li><span style="color: black">List Item 1</span></li> <li><span style="color: black">List Item 2</span></li> <li><span style="color: black">List Item 3</span></li> <li><span style="color: black">List Item 4</span></li> </ul>
This displays as:
- List Item 1
- List Item 2
- List Item 3
- List Item 4
It’s a little bit of a pain to have to include the extra tags, but it’s less of a pain that creating images every time you need different colored bullets.
Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of Yahoo!, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.
Both comments and pings are currently closed.
2 Comments
I have already used it in this style many times because I am to lazy to create images and upload them to the server each time, too.
I prefer "div" elements inside (instead of spans) because these are block level elements which allows me to add "p" elements or headers inside them, too.
P.S. Why is "info at sebastian dash werner dot net" a invalid mail address (Replaced all special characters here).
Sebastian Werner on January 14th, 2006 at 4:09 am
Well, I prefer spans since the contents of list items are inline and not block, but it all depends on what your use case is.
And it looks like the regular expression I was using to validate e-mail addresses didn’t handle a dash. I’ve updated it so you shouldn’t any other issues now.
Nicholas C. Zakas on January 14th, 2006 at 10:32 am