Comment définir la couleur des balles dans des listes UL/LI via CSS, sans utiliser d’images ou balises span ?

Question

Imaginez une simple liste non triée, avec quelques - <li> articles imbriquée à l'intérieur d' <ul> tags. Maintenant, j'ai défini les balles pour être en forme de carré par list-style:square; cependant, si j'ai mis la couleur de l' <li> articles, color: #F00; alors tout devient rouge!

Alors que je veux SEULEMENT pour définir la couleur de ces puces carrées. Ce code élégant dans le CSS définit uniquement la couleur des balles? Élégant, c'est à dire sans l'aide de sprite images ou de balises span.

html

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}

Answer 1

La façon la plus courante pour cela est quelque chose dans ce sens :

Démonstration en direct : http://jsfiddle.net/leaverou/ytH5P/

Fonctionne dans tous les navigateurs, y compris IE version 8 et plus.

Answer 2

navigation sur quelque temps auparavant, trouvé ce site, avez-vous essayé cette solution ?

peut sembler dur, mais vous pouvez faire votre propre png image/motif ici, http://www.patternify.com/ puis copiez / collez votre code et personnalisez vos balles =) stills élégants ?

Answer 3

J’ai simplement résoudre ce problème comme celui-ci, qui devrait fonctionner dans tous les navigateurs :

Answer 4

La spécialisation actuelle de la CSS 3 Listes module ne spécifiez l' ::marker le pseudo-élément qui permette de faire exactement ce que vous voulez; FF a été testé à ne pas appuyer ::marker et je doute que ce soit Safari ou Opera. C'est à dire, bien sûr, ne le supporte pas.

Donc, pour l'instant, la seule façon de le faire est d'utiliser une image avec list-style-image.

Je pense que vous pouvez envelopper le contenu d'un li avec un span , et puis vous pouvez définir la couleur de chacun, mais qui semble un peu hackish pour moi.

Answer 5

Pour cela, j’utilise jQuery :

& avec certains CSS :

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