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

Leave a comment