How to fill the color inside the circle shaped line items

Question

How do I get a red color for the line items shown as a circle?

/* This maps to ul */
.rich-datalist {
    list-style: disc;
    list-style-position: inside; 
    margin: 6px 0 1px 0;
    padding-left: 18px;
}

/* This maps to li */
.rich-list-item {
    padding-top: 5px;
    padding-bottom: 15px;
    font-size: 13px;
}

Answer 1

HTML bullet color is the same as the list item's color property:

.rich-datalist { color: red; }

If you need the bullet to be a different color than the text, the easiest way is to apply a left-aligned non-repeating background image of the bullet, and apply a left padding to the list item.

.rich-datalist { 
list-style: none;
}
.rich-datalist-item { 
background: transparent url('/path/to/red-bullet.png') no-repeat left center; 
padding-left: 20px;
}

Answer 2

This will one day be possible in CSS3, but until then the only way forward it to wrap the contents of each LI in another container, and style that, so:

HTML:

<ul>
<li><span>lorem</span></li>
<li><span>ipsum</span></li>
<li><span>dolor</span></li>
</ul>

CSS:

ul{color: red}
ul li span{color: blue}