web-dev-qa-db-fra.com

Comment définir les couleurs Bullet dans les listes HTML UL / LI via CSS sans utiliser d'images ou de balises span

Imaginez une simple liste non triée contenant des éléments <li>. Maintenant, j’ai défini les puces de forme carrée via list-style:square; Cependant, si je mets la couleur des éléments <li> avec color: #F00; alors tout devient rouge!

Bien que je veuille seulement définir la couleur des balles carrées. Y at-il un manière élégante pour définir la couleur des puces en CSS ...

... sans utiliser d'images Sprite ni de balises span!

HTML

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

CSS

li{
   list-style:square;
}
csscss3layoutcolorshtml-lists
495
Sam

La façon la plus courante de procéder est la suivante:

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

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}
<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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

Fonctionnera dans tous les navigateurs, y compris IE à partir de la version 8.

1006
Lea Verou

en naviguant il y a quelque temps, vous avez trouvé ce site, avez-vous essayé cette alternative?

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

cela semble difficile, mais vous pouvez créer votre propre image/modèle png ici, puis copiez/collez votre code et personnalisez vos puces. =) toujours élégant?

MODIFIER:

en suivant l’idée de @ lea-verou sur l’autre réponse et en appliquant cette philosophie d’amélioration des sources extérieures, j’en suis venu à cette autre solution:

  1. intégrez dans votre tête la feuille de style de la bibliothèque d'icônes Webfont, dans ce cas Font Awesome:

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

  1. prenez un code de FontAwesome feuille de triche (ou toute autre icône de webfont).
i.e.:
fa-angle-right [&#xf105;]

et utilisez la dernière partie de f ... suivie d'un nombre comme celui-ci, 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 vous avez des astuces de balle personnalisées aussi =)

violon

88
Facundo Colombier

La spécification actuelle du module Listes CSS spécifie le pseudo-élément ::marker qui ferait exactement ce que vous voulez; FF a été testé pour ne pas supporter _::marker_ et je doute que Safari ou Opera l’ait. IE, bien sûr, ne le supporte pas.

Pour le moment, la seule façon de faire est d’utiliser une image avec _list-style-image_.

J'imagine que vous pourriez envelopper le contenu d'un li avec un span, puis définir la couleur de chacun, mais cela me semble un peu fictif.

45
Alex

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

Une façon de le faire consiste à utiliser li:before avec content: "" et à le styler en tant qu'élément inline-block.

Voici un extrait de code fonctionnel:

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

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

ul 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>
42
Rahul Desai

Une autre solution consiste toutefois à utiliser un pseudo-élément :before avec un border-radius: 50%. Cela fonctionnera dans tous les navigateurs, y compris IE 8 et versions ultérieures.

L'utilisation de l'unité em permet de réagir rapidement aux modifications de la taille de la 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 de jolies ombres, ce qui ne semblera pas agréable avec la solution content: "• ".

24
Jose Rui Santos

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

Voici un exemple.

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

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

J'utilise jQuery pour cela:

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

& avec du CSS:

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

peut-être exagéré, mais pratique si vous codez pour un CMS et que vous ne voulez pas demander à vos rédacteurs en chef de mettre une durée supplémentaire dans chaque élément de la liste.

17
Veerle Verbert

Je recommanderais de donner à la LI un background-image et padding-left. L'attribut list-style-image est floconneux dans les environnements multi-navigateurs, et l'ajout d'un élément supplémentaire, tel qu'une étendue, n'est pas nécessaire. Donc, votre code finirait par ressembler à ceci:

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

La chose la plus simple que vous puissiez faire est d’envelopper le contenu du <li> dans un <span> ou l’équivalent, vous pouvez ainsi définir la couleur de façon indépendante.

Vous pouvez également créer une image avec la couleur de puce souhaitée et la définir avec la propriété list-style-image.

9
Adam Bryzak

Une variante de Lea Vero solution avec une indentation parfaite dans les entrées multilignes pourrait ressembler à 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;
}
8
David

J'ajoute ma solution à ce problème.

Je ne veux pas utiliser image et validator vous punira pour avoir utilisé des valeurs négatives en CSS, je vais donc de cette façon:

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

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

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

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

CSS

ul {
    color: red;
}

li {
    color: black;
}

La couleur de la balle est définie sur la balise ul, puis nous inversons la couleur li.

5
webster76

La solution de Lea Verous est bonne mais je voulais plus de contrôle sur la position des balles, c’est donc ma démarche:

.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;
}
3
Henning Fischer

En prenant la démo de Lea, voici une manière différente de créer des listes non ordonnées, avec des bordures: 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;
}
3
user2188875