Changer la couleur des puces d'une liste HTML sans utiliser span

Je me demandais s'il y avait un moyen de changer la couleur des puces dans une liste.

J'ai une liste comme celle-ci:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

Il ne m'est pas possible d'insérer quoi que ce soit dans les li, comme un «span» ou un «p». Puis-je changer la couleur des puces mais pas le texte d'une manière intelligente?

Si vous pouvez utiliser une image, vous pouvez le faire. Et sans image, vous ne pourrez pas modifier uniquement la couleur des puces et non le texte.

Utiliser une image

li { list-style-image: url(images/yourimage.jpg); }

Voir

image-style-liste

Sans utiliser d'image

Ensuite, vous devez modifier le balisage HTML et inclure une étendue dans la liste et colorer le li et l'étendue avec des couleurs différentes.

J'ai réussi cela sans ajouter de balisage, mais en utilisant à la place li:before. Cela a évidemment toutes les limitations de :before(pas d'ancien support IE), mais il semble fonctionner avec IE8, Firefox et Chrome après quelques tests très limités. Le style de puce est également limité par ce qui est en unicode.

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Nous pouvons combiner list-style-image avec svgs, que nous pouvons inline en css ! Cette méthode offre un contrôle incroyable sur les "balles", qui peuvent devenir n'importe quoi.

Pour obtenir un cercle rouge, utilisez simplement le css suivant:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

Mais ce n'est que le début. Cela nous permet de faire tout ce que nous voulons avec ces balles. les cercles ou les rectangles sont faciles, mais tout ce que vous pouvez dessiner avec svgvous pouvez y rester! Découvrez l'exemple ci-dessous:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

Attributs largeur / hauteur

Certains navigateurs exigent widthque les heightattributs soient définis sur le<svg> , ou ils n'afficheront rien. Au moment de la rédaction de cet article, les versions récentes de Firefox présentent ce problème. J'ai défini les deux attributs dans les exemples.

Encodages

Un commentaire récent m'a rappelé les encodages pour le data-uri. Cela a été un problème pour moi récemment, et je peux partager un peu d'informations que j'ai recherchées.

La spécification data-uri , qui fait référence à la spécification URI , indique que le svg doit être codé selon la spécification URI . Cela signifie que toutes sortes de caractères doivent être encodés, par exemple <devient %3C.

Certaines sources suggèrent un encodage base64, qui devrait résoudre les problèmes d'encodage, mais cela augmentera inutilement la taille du SVG, contrairement à l'encodage URI. Je recommande l'encodage URI.

Plus d'informations:

support du navigateur: > ie8

astuces css sur svgs

mdn sur svgs

S'appuyant sur la solution de @ Marc - puisque le caractère de puce est rendu différemment avec différentes polices et navigateurs, j'ai utilisé la technique css3 suivante avec un rayon de bordure pour créer une puce sur laquelle j'ai plus de contrôle:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

Je sais que c'est une question vraiment, vraiment ancienne, mais je jouais avec ça et j'ai trouvé une façon que je n'ai pas vue publiée. Donnez une couleur à la liste, puis écrasez la couleur du texte à l'aide du ::first-linesélecteur. Je ne suis pas un expert, alors peut-être qu'il y a quelque chose qui ne va pas avec cette approche qui me manque, mais cela semble fonctionner.

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Construire à la fois les solutions @Marc et @jessica - Voici la solution que j'utilise:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

J'utilise empour les tailles de police, donc si vous définissez votre topvaleur, .5emelle sera toujours placée au milieu de votre première ligne de texte. J'ai utilisé left:-20pxparce que c'est la position par défaut des puces dans les navigateurs: parent padding/2

J'ai aussi beaucoup aimé la réponse de Marc - j'avais besoin d'un ensemble d'UL de couleurs différentes et évidemment, il serait plus facile d'utiliser simplement une classe. Voici ce que j'ai utilisé pour l'orange, par exemple:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

De plus, j'ai trouvé que le code hexadécimal que j'utilisais pour "content:" était différent de celui de Marc (ce cercle hexadécimal semblait être un peu trop haut). Celui que j'ai utilisé semble s'asseoir parfaitement au milieu. J'ai également trouvé plusieurs autres formes (carrés, triangles, cercles, etc.) ici même

Pour moi, la meilleure option est d'utiliser des pseudo éléments CSS, donc pour discle style de puce, cela ressemblerait à ça:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Remarques:

• widthet heightdevrait avoir des valeurs égales pour garder les pointeurs arrondis
• vous pouvez mettre border-radiusà zéro si vous voulez avoir des squarepuces de liste

Pour plus de styles de puces, vous pouvez utiliser d'autres formes css https://css-tricks.com/examples/ShapesOfCSS/ (choisissez ceci qui ne nécessite pas de pseudo éléments pour fonctionner, donc par exemple des triangles)

::marqueur

Vous pouvez utiliser le ::markerpseudo-élément CSS pour sélectionner la zone de marqueur d'un élément de liste (c'est-à-dire des puces ou des nombres).

ul li::marker {
  color: red;
}

Remarque: au moment de publier cette réponse, cela est considéré comme une technologie expérimentale et n'a été implémenté que dans Firefox et Safari (jusqu'à présent).

S'appuyant sur la réponse de @ ddilsaver. Je voulais pouvoir utiliser un sprite pour la balle. Cela semble fonctionner:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

J'ai essayé cela aujourd'hui et
j'ai tapé ceci: j'avais besoin d'afficher des marqueurs de couleur dans mes listes (à la fois des puces et des nombres). Je suis tombé sur cette astuce et j'ai écrit dans ma feuille de style avec la mutualisation des propriétés:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

J'ai choisi un personnage différent pour afficher une puce, en la regardant ici . J'avais besoin d'ajuster la marge en conséquence, peut-être que les valeurs ne s'appliqueront pas avec la police que vous avez choisie (les chiffres utilisent votre police Web).

Essayez plutôt d'utiliser ceci:

ul {
  color: red;
}

Version en ligne, fonctionne pour Outlook Desktop:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle .