navigation il y a quelque temps, trouvé ce site, Avez-vous essayé cette alternative?

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

semble dur, mais vous pouvez faire votre propre image png/motif ici , puis copier/coller votre code et personnaliser vos balles =) reste élégant?

EDIT:

suivant l'idée de @lea-verou sur l'autre réponse et en appliquant cette philosophie d'amélioration des sources externes j'ai venez à cette autre solution:

1. intégrer dans votre tête la feuille de style de la Webfont icônes de la Bibliothèque, dans ce cas, la Police Génial:

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

2. prenez un code de FontAwesome cheatsheet (ou toute autre icône webfont).

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

et utiliser la dernière partie de F... suivi par un nombre comme ceci, avec le font-family aussi:

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

et c'est tout! maintenant que vous avez personnalisé balle de conseils de trop =)

violon

la spécification courante du CSS 3 Liste le module spécifie le ::marker pseudo-élément qui ferait exactement ce que vous voulez; FF a été testé ne pas soutenir ::marker et je doute que soit Safari ou L'Opéra l'ait. IE, bien sûr, ne le soutient pas.

donc en ce moment, la seule façon de faire ceci est d'utiliser une image avec list-style-image .

je suppose que vous pourriez envelopper le contenu de un li avec un span et ensuite vous pourriez définir la couleur de chacun, mais cela me semble un peu hackish.

Je résous simplement ce problème comme ceci, qui devrait fonctionner dans tous les navigateurs:

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;
}

Une façon de le faire est d'utiliser li:before avec content: "" et le style comme inline-block élément.

voici un extrait de code de travail:

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>

pourtant, une autre solution est d'utiliser un :before pseudo élément avec un border-radius: 50% . Cela fonctionnera dans tous les navigateurs, y compris IE 8 et plus.

L'utilisation de l'unité em permet de réagir aux changements de taille de police. Vous pouvez le tester, en redimensionnant votre fenêtre 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

Vous pouvez même jouer avec le box-shadow pour créer certains de belles ombres, quelque chose qui ne sera pas joli avec la solution content: "• " .

j'utilise jQuery pour ceci:

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

et avec un peu de CSS:

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

peut-être exagéré, mais pratique si vous codez pour un CMS et vous ne voulez pas demander à vos éditeurs de mettre une portée supplémentaire dans chaque liste-éléments.

j'ai essayé ça et les choses sont devenues bizarres pour moi. (css a cessé de fonctionner après la partie :after {content: "";} de ce tutoriel. J'ai trouvé que vous pouvez colorer les balles en utilisant simplement color:#ddd; sur l'article li lui-même.

voici un exemple .

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

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

je recommande de donner le LI a background-image et padding-left . L'attribut list-style-image est flasque dans les environnements de navigation croisée, et l'ajout d'un élément supplémentaire, tel qu'une portée, est inutile. Votre code ressemblerait donc à ceci:

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

la chose la plus facile que vous pouvez faire est d'envelopper le contenu du <li> dans un <span> ou l'équivalent alors vous pouvez définir la couleur indépendamment.

alternativement, vous pouvez faire une image avec la couleur de balle que vous voulez et la mettre avec la propriété list-style-image .

une variante de Lea Verou solution avec une indentation parfaite dans les entrées multilignes pourrait être quelque chose comme ceci:

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

li{
    padding-left: 1.5em; 
}

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

j'ajoute ma solution à ce problème.

Je ne veux pas utiliser l'image et le validateur vous punira pour avoir utilisé des valeurs négatives dans CSS, donc je vais par là:

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

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

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

je sais que c'est un peu une réponse tardive pour ce post, mais pour la référence...

CSS

ul {
    color: red;
}

li {
    color: black;
}

la couleur de la balle est définie sur l'étiquette ul et ensuite nous changeons la couleur li en arrière.

Lea Verous solution est bonne, mais je voulais plus de contrôle sur la position de la balle c'est donc mon approche:

.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;
}

en prenant la démo de Lea, voici une autre façon de faire des listes sans ordre, avec des frontières: 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;
}

ça ira..

li{
  color: #fff;
}