просматривая когда-то ранее, нашел этот сайт, попробовал ли вы эту альтернативу?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

звучит сложно, но вы можете сделать свой собственный png image/pattern здесь, затем скопируйте/вставьте свой код и настроить ваши пули =) стильные элегантные?

EDIT:

следуя идее @lea-verou по другому ответу и применяя эту философию улучшения внешних источников, я пришел к этому другому решению:

• встройте в свою голову таблицу стилей библиотеки значков Webfont, в этом случае Font Awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2. возьмите код из FontAwesome cheatsheet (или любые другие значки webfont).

i.e.:
fa-angle-right []

и используйте последнюю часть f... затем число, подобное этому, с помощью font-family тоже:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

и что это! теперь у вас есть собственные подсказки для пули тоже =)

fiddle

Я просто решаю эту проблему, как это, которая должна работать во всех браузерах:

HTML:

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

CSS

ul li{
    color: red
}

ul li span{
    color: blue;
}

В текущей спецификации модуля CSS 3 Lists указан ::marker псевдоэлемент, который будет делать именно то, что вы хотите; FF был протестирован чтобы не поддерживать ::marker, и я сомневаюсь, что это либо Safari, либо Opera. IE, конечно, не поддерживает его.

Итак, прямо сейчас единственный способ сделать это - использовать изображение с list-style-image.

Я предполагаю, что вы можете обернуть содержимое li с помощью span, а затем вы можете установить цвет каждого, но это кажется мне немного хакерским.

Один из способов сделать это - использовать li:before с content: "" и стилизовать его как элемент inline-block.

Вот рабочий фрагмент кода:

ul {
  list-style-type: none; /* no default bullets */
}

li { 
  font-family: Arial;
  font-size: 18px;
}

li:before { /* the custom styled bullets */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}

<ul>
  <li>Swollen joints</li>
  <li>Pain in hands and knees</li>
  <li>Redness around joints</li>
  <li>Constant fatigue</li>
  <li>Morning stiffness in joints</li>
  <li>High fevers</li>
  <li>Rheumatoid nodules, which develop around joints</li>
</ul>

Тем не менее, другим решением является использование псевдоэлемента :before с border-radius: 50%. Это будет работать во всех браузерах, включая IE 8 и выше.

Использование блока em позволяет реагировать на изменения размера шрифта. Вы можете проверить это, изменив размер окна jsFiddle.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

Вы даже можете играть с помощью box-shadow, чтобы создать приятные тени, что не понравится с помощью решения content: "• ".

Я попробовал это, и все стало странно для меня. (css перестала работать после части :after {content: "";} этого урока. Я обнаружил, что вы можете покрасить пули, просто используя color:#ddd; в самом элементе li.

Здесь пример.

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

Я использую jQuery для этого:

jQuery('li').wrapInner('<span class="li_content" />');

& с некоторым CSS:

li { color: red; }
li span.li_content { color: black; }

может быть, излишне, но удобно, если вы кодируете CMS, и не хотите, чтобы ваши редакторы добавляли дополнительный диапазон в каждом элементе списка.

Я бы рекомендовал дать LI a background-image и padding-left. Атрибут list-style-image является ошибочным в средах с несколькими браузерами, и добавление дополнительного элемента, такого как диапазон, не является обязательным. Таким образом, ваш код будет выглядеть примерно так:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}

Вариант решения Lea Verou с идеальным отступом в многострочных записях может быть примерно таким:

ul{
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
}

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}

Самое простое, что вы можете сделать, это обернуть содержимое <li> в <span> или эквивалент, после чего вы можете установить цвет независимо.

В качестве альтернативы вы можете сделать изображение с нужным цветом пули и установить его с помощью свойства list-style-image.

Я добавляю свое решение этой проблемы.

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

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

Я знаю это немного позднего ответа на этот пост, но для справки...

CSS

ul {
    color: red;
}

li {
    color: black;
}

Цвет пули определен по тегу ul, а затем мы возвращаем цвет li.

Решение Lea Verous хорошее, но я хотел большего контроля над положением пуль, так что это мой подход:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}

Взятие Lea demo, здесь другой способ создания неупорядоченных списков с границами: http://jsfiddle.net/vX4K8/7/

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            </ul>
        </ul>
</ul>

CSS

ul {
list-style: none;
margin: 0;
}

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}

Это сделает это.

li{
  color: #fff;
}