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.

Wed 24 Dec 2014 05:41

generic for cialis

generic for cialis said:

What’s up to all, how is all, I think every one is getting more from this web site, and your views are fastidious designed for new users.

Wed 24 Dec 2014 08:53

cialis online pharmacy

cialis online pharmacy said:

You are so cool! I don’t believe I have read through a

single thing like this before. So great to discover someone with some genuine thoughts on this issue.

Seriously.. thank you for starting this up. This website is

one thing that’s needed on the web, someone with some originality!

Tue 30 Dec 2014 03:59

buy cialis online pharmacy

buy cialis online pharmacy said:

great issues altogether, you just won a new reader.

What could you suggest in regards to your post that you just made some days in the past?

Any positive?

Tue 30 Dec 2014 10:28

canada pharmacy online orders

canada pharmacy online orders said:

This is really interesting, You’re a very skilled blogger.

I have joined your feed and look forward to seeking more

of your wonderful post. Also, I have shared your website in my social

networks!

Tue 30 Dec 2014 12:29

or viagra online pharmacy

or viagra online pharmacy said:

You should be a part of a contest for one of the greatest blogs online.

I am going to highly recommend this web site!

Thu 1 Jan 2015 02:05

canadian online pharmacy

canadian online pharmacy said:

Currently it looks like Drupal is the top blogging platform available right

now. (from what I've read) Is that what you are

using on your blog?

Thu 8 Jan 2015 17:04

buy cialis online canada

buy cialis online canada said:

Hey there! I know this is kind of off-topic but I needed to ask.

Does building a well-established blog such as yours require a lot of work?

I am brand new to writing a blog however I do write

in my diary everyday. I’d like to start a blog so I will be able to share

my personal experience and feelings online. Please let me know if you have any kind of ideas or tips for brand

new aspiring blog owners. Appreciate it!

Sat 10 Jan 2015 11:51

cialis over the counter

cialis over the counter said:

Do you have any video of that? I’d love to find out more details.

Mon 12 Jan 2015 04:32

generic ed drugs

generic ed drugs said:

These are really impressive ideas in regarding blogging.

You have touched some pleasant things here. Any way keep up wrinting.

Mon 12 Jan 2015 11:48

cialis pharmacy

cialis pharmacy said:

My brother recommended I might like this website. He was totally right.

This post truly made my day. You cann’t imagine simply how much time I had spent

for this info! Thanks!

Sat 17 Jan 2015 01:15

Buying brand cialis online pharmacy

Buying brand cialis online pharmacy said:

Fine way of telling, and fastidious post to obtain information about my presentation subject,

which i am going to deliver in college.

Sat 17 Jan 2015 14:27

How to buy cialis online from canada

How to buy cialis online from canada said:

With havin so much content do you ever run into any issues of plagorism or

copyright infringement? My website has a lot of completely

unique content I've either authored myself or outsourced but it looks like a lot of it is popping it

up all over the internet without my authorization. Do you know any ways to help

stop content from being ripped off? I’d certainly appreciate it.

Sun 18 Jan 2015 02:44

Pharmacies cialis professional

Pharmacies cialis professional said:

Very nice post. I just stumbled upon your blog and wished to say that I've really enjoyed browsing your blog posts.

After all I’ll be subscribing to your feed and I hope

you write again soon!

Sun 18 Jan 2015 06:20

Northwest pharmacy online

Northwest pharmacy online said:

Amazing blog! Is your theme custom made or did you download it from somewhere?

A theme like yours with a few simple adjustements would really make

my blog shine. Please let me know where you got your design. Many thanks

Mon 19 Jan 2015 09:11

Cheapest cialis pharmacy

Cheapest cialis pharmacy said:

Hi, after reading this remarkable piece of writing i am also glad to share my knowledge here with mates.

Wed 21 Jan 2015 07:57

generic for cialis in canada

generic for cialis in canada said:

Does your site have a contact page? I’m having trouble locating

it but, I’d like to send you an email. I've got some suggestions for your blog you might be interested in hearing.

Either way, great website and I look forward to seeing it

develop over time.

Wed 21 Jan 2015 19:58

canadian viagra

canadian viagra said:

Wonderful work! This is the kind of info that are supposed to be shared around the net.

Disgrace on the search engines for now not positioning this publish higher!

Come on over and visit my web site . Thanks =)

Thu 22 Jan 2015 18:39

canadian drugs online

canadian drugs online said:

The General pharmacy is in fact very affordable whether you are from no matter what sections of the modern culture.

The price is affordable for everyone and anyone; you might want to are looking for of buying it.

When decision is produced, check out the perfect hold. After acquiring the treatment, you

have enjoyed it. Just swallow the supplements with simply standard water.

northwestpharmacy com

Wed 4 Feb 2015 06:31

northwestpharmacy com

northwestpharmacy com said:

Nice post. I learn something new and challenging on websites I stumbleupon everyday.

It will always be interesting to read content from other authors and practice something from their websites.

Sun 15 Feb 2015 12:38

canadian pharcharmy online

canadian pharcharmy online said:

Hello are using Wordpress for your blog platform? I’m new to

the blog world but I’m trying to get started and create my own. Do you require any

coding knowledge to make your own blog? Any help would be greatly appreciated!

Sat 28 Feb 2015 01:20

xypbdzy

xypbdzy said:

gsureeno

Sun 1 Mar 2015 18:49

hello

hello said:

smodxb http://cpfplr.com/ <a href="http://eypxns.com/ ">biyraud</a> [url=http://bjgetx.com/]biyraud[/url]

Thu 12 Mar 2015 23:43

vigra com

vigra com said:

Hello There. I discovered your weblog the usage of msn. This is a really neatly written article.

I’ll be sure to bookmark it and return to read extra of your useful info.

Thank you for the post. I’ll certainly comeback.

Wed 18 Mar 2015 18:42

payday loan

payday loan said:

wigdzbe http://paydayloansrny.com/ payday loan =-] http://paydayloansrnx.com/ payday loans YBjWXV http://paydayloansrnz.com/ fast payday loans 3732

Thu 26 Mar 2015 07:52

canadian pharmacy viagra

canadian pharmacy viagra said:

Hi, Neat post. There’s a problem along with

your web site in web explorer, might check this? IE still is the marketplace leader

and a good portion of folks will pass over your excellent writing due to this problem.

Thu 26 Mar 2015 22:45

dc25 animal

dc25 animal said:

Thanks for sharing your thoughts about dyson groom tool review.

Regards

Thu 2 Apr 2015 05:50

treatment erectile dysfunction

treatment erectile dysfunction said:

I do not even know how I ended up here, but I thought this post was good.

I don’t know who you are but certainly you are going to a famous blogger if you

aren’t already ;) Cheers!

Thu 2 Apr 2015 09:28

cost cialis

cost cialis said:

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

Extremely helpful information particularly the last part :

) I care for such information much. I was seeking this certain info for

a long time. Thank you and best of luck.

Mon 6 Apr 2015 02:31

ed treatments

ed treatments said:

Excellent article! We are linking to this particularly

great content on our website. Keep up the great writing.

Thu 9 Apr 2015 14:22

dyson home cleaning kit

dyson home cleaning kit said:

Just desire to say your article is as amazing. The clearness in your put up is just excellent and i could think you’re

a professional on this subject. Well together with your permission let me to snatch your feed to stay updated with impending

post. Thanks a million and please keep up the gratifying work.

Tue 14 Apr 2015 03:53

payday loans

payday loans said:

quepzgoy http://paydayloansdpu.com/ payday loans 8555 http://2012paydayloans.net/ payday loans 3877 http://uk.paydayloansnsa.com/ payday uk >:-OOO http://paydayloansrnq.com/ payday loans CEfJB http://paydayloansbrq.com/ payday loans ukLDq http://paydayloansrnr.com/ payday loans >:-OOO http://paydayloansrna.com/ payday loans >:-[

Thu 16 Apr 2015 16:02

cheap flights to las vegas from atlanta

cheap flights to las vegas from atlanta said:

Just wish to say your article is as amazing. The clearness

on your post is simply spectacular and i can assume you’re knowledgeable in this subject.

Well together with your permission allow me to clutch your feed to keep up to date with approaching post.

Thanks a million and please keep up the rewarding work.

Thu 30 Apr 2015 18:50

canadian pharmacies shipping to usa

canadian pharmacies shipping to usa said:

Excellent beat ! I wish to apprentice while you amend your website, how could i subscribe for a blog web site?

The account helped me a acceptable deal. I had been tiny bit acquainted of this your broadcast

provided bright clear idea

Fri 1 May 2015 04:33

Canadian pharmacies shipping to usa

Canadian pharmacies shipping to usa said:

Hello! Do you know if they make any plugins to help with Search Engine Optimization? I’m

trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains.

If you know of any please share. Many thanks!

Sun 3 May 2015 20:09

dyson dc24

dyson dc24 said:

It’s awesome to visit this website and reading the views of all colleagues on the topic of this article, while I

am also zealous of getting experience.

Wed 13 May 2015 15:55

buy cialis united states

buy cialis united states said:

This is a topic that’s close to my heart… Thank you! Where are your

contact details though?

Wed 13 May 2015 18:51

Canadian pharmacy

Canadian pharmacy said:

I really like what you guys are up too. This type of clever work and reporting!

Keep up the superb works guys I've added you guys to my own blogroll.

Wed 13 May 2015 18:58

Canadian Pharmacy

Canadian Pharmacy said:

I need to to thank you for this excellent read!! I absolutely loved

every little bit of it. I've got you book marked to check out new stuff you post…

Wed 13 May 2015 23:34

side effects cialis one day

side effects cialis one day said:

I blog quite often and I really appreciate your information. This article

has truly peaked my interest. I am going to take a note of your blog and keep checking for

new information about once a week. I subscribed to your RSS feed as well.

Thu 14 May 2015 02:01

Canadian pharmacy

Canadian pharmacy said:

Can I just say what a relief to find an individual who really understands what they are discussing on the web.

You actually understand how to bring a problem to light and make it important.

A lot more people should read this and understand this

side of your story. I was surprised that you’re not more popular since you definitely possess the gift.

Thu 14 May 2015 07:25

Canadian pharmacy

Canadian pharmacy said:

I love reading through an article that will make people think.

Also, thank you for allowing me to comment!

Fri 15 May 2015 12:59

cialis testimonial

cialis testimonial said:

Valuable information. Lucky me I discovered your web site by accident, and

I am surprised why this accident didn’t took

place in advance! I bookmarked it.

Fri 15 May 2015 13:10

Where buy cialis online canada

Where buy cialis online canada said:

WOW just what I was searching for. Came here by searching

for ordering cialis online from canada

Sat 16 May 2015 00:39

cialis free trial offer

cialis free trial offer said:

This piece of writing is in fact a pleasant one it helps new web people, who

are wishing for blogging.

Sun 17 May 2015 11:11

buying generic cialis

buying generic cialis said:

Hey there, I think your site might be having browser compatibility issues.

When I look at your blog in Opera, it looks fine

but when opening in Internet Explorer, it has some overlapping.

I just wanted to give you a quick heads up!

Other then that, wonderful blog!

Mon 18 May 2015 14:25

viagra online

viagra online said:

rvfivr http://viagraonlinerrr.com/ viagra online HsBkb http://genericcialisrsa.com/ generic cialis >:-OOO http://genericviagrarsa.com/ generic viagra CWuTeW http://cialisonlinerrr.com/ cialis online 9433

Tue 19 May 2015 06:49

Canadian Pharmacy

Canadian Pharmacy said:

Your style is very unique compared to other people I have read stuff from.

Thanks for posting when you've got the opportunity, Guess I’ll just bookmark this blog.

Leave a comment