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.

Fri 12 Dec 2014 01:02

cialis women

cialis women said:

Can you tell us more about this? I’d care to find out more details.

Sat 13 Dec 2014 08:05

cheap cialis canada

cheap cialis canada said:

Nice post. I was checking continuously this blog and I’m

impressed! Extremely useful info particularly the last

part :) I care for such information much.

I was seeking this certain info for a long time.

Thank you and good luck.

Tue 16 Dec 2014 10:22

low cost cialis canada

low cost cialis canada said:

Excellent post. I was checking continuously this blog and I’m impressed!

Very helpful information specifically the last part :

) I care for such information much. I was looking for this certain information for

a very long time. Thank you and good luck.

Tue 16 Dec 2014 19:22

buy cialis canada online

buy cialis canada online said:

What’s up to all, the contents present at this website are in fact amazing for

people knowledge, well, keep up the nice work fellows.

Fri 19 Dec 2014 06:44

medications com

medications com said:

Hello I am so delighted I found your webpage, I really found you by mistake,

while I was looking on Aol for something else, Anyhow I am here now and would just like to say thank you for a

incredible post and a all round entertaining blog (I

also love the theme/design), I don’t have time to

go through it all at the minute but I have saved it and also included your RSS feeds,

so when I have time I will be back to read a

lot more, Please do keep up the awesome jo.

Sat 20 Dec 2014 08:37

fix erectile dysfunction

fix erectile dysfunction said:

Hi, Neat post. There is an issue with your

site in internet explorer, may check this?

IE nonetheless is the market chief and a large element of people will

miss your excellent writing because of this problem.

Leave a comment