Change Unordered List Bullet Color

Have you ever wanted to change the bullet color of an unordered list, or change the appearance of the numbers in an ordered list, without using images? I have, and it’s always been sitting in the back of my mind waiting for an answer. Today it dawned on me, and it was so simple that I smacked my forehead when I did it, and now I’ll save you the pain and anguish and show you how.

First lets start with our lists:

<ul>
<li>Here is our</li>
<li>Unordered List</li>
<li>WOW!</li>
</ul>


<ol>
<li>Here is our</li>
<li>Ordered List</li>
<li>COOL!</li>
</ol>

Now to get it to do what we want it to do we need to add some paragraph tags.

<ul>
<li><p>Here is our</p></li>
<li><p>Unordered List</p></li>
<li><p>WOW!</p></li>
</ul>

<ol>
<li><p>Here is our</p></li>
<li><p>Ordered List</p></li>
<li><p>COOL! </p></li>
</ol>

Finally, we need to style it and because I’m such a good designer, I’m going to make my bullets and numbers Green, and my text black.


ul{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#00FF00;
}
ul p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #000000;
margin:5px 0;
}
ol{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#00FF00;
font-style:italic;
line-height:24px;
}
ol p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
color: #000000;
margin:0;
}

WOW! That looks good, see my example, and it even works in IE!

How did I do it?

It’s really simple, I just added a paragraph tag to each list item and styled each one accordingly. Keep in mind, if you change something in the parent, the <ul> or <ol> you’ll need to change it in the child as well, unless you want it to be the same.

Popularity: 10% [?]