Coloured bullet points

Wednesday 22nd October

How to add a splash of colour to your bullet points.

This is a very basic technique for colouring a standard list-item's bullets differently from that item's text colour, just as you'll see on this site. It relies on the fact that a bullet's colour is taken from the list item's style, but the text within that list item can be styled separately by wrapping it in a suitable element. In short:

The above list serves as a simple example: bullet points are red whilst text remains black.

This suggested implementation uses javascript (via jQuery) to insert the additional elements and style everything correctly. Feel free to pollute your markup with extra elements inside each list-item and do away with the client-side scripting.

Markup

The markup is as basic as a list can be:

<ul>
    <li>Unordered list with a few list items</li>
</ul>

Code

All css is applied using javascript, when the DOM is loaded; in this case, I'm using the jQuery library, but you can, of course, use plain old javascript if you like:

$(document).ready(function() {
    $('ul li').wrapInner('<span style="color: #000;"></span>');
    $('ul').css('color', '#d00');
});

Updates

Friday 13th February 2009

It recently came to my attention that IE (all current versions) completely screws up hanging list decorations by … removing them altogether! Thanks to an excellent tip, I've been able to fix that in this article, and will apply it site-wide when I get the chance.


Tweet

Comments

Sun 17 Apr 2011 18:24

Las Vegas Web Designers

Las Vegas Web Designers said:

Thank you for sharing the information with us. <a href="http://www.premierpixels.com">Las Vegas Web Designers</a>

Mon 2 May 2011 02:47

RA Kitzmann

RA Kitzmann said:

I am looking for a javascript for expanding and collapsing bulletpoints, do you have any ideas for that? thanks!

Thu 26 Jan 2012 01:10

cotton yarn

cotton yarn said:

Feel free to pollute your markup with extra elements inside each list-item and do away with the client-side scripting.

Leave a comment