Как залить цвет внутри позиции в форме круга

Question

Как получить красный цвет для позиций, показанных в виде круга?

/* 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-маркера совпадает со свойством цвета элемента списка:

.rich-datalist { color: red; }

Если необходимо, чтобы цвет маркера отличался от текста, самый простой способ - применить неповторяющееся фоновое изображение маркера по левому краю и применить левый отступ к элементу списка.

.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

В один прекрасный день это будет возможно в CSS3, но до тех пор единственный способ продвинуть его - обернуть содержимое каждого LI в другой контейнер и стилизовать его так:

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}