Existe-t-il un moyen simple de changer la couleur d’une puce dans une liste?

https://stackoverflow.com/questions/76564

09-06-2019
|

Question

Tout ce que je veux, c'est pouvoir changer la couleur d'une puce dans une liste en gris clair. La valeur par défaut est le noir et je ne vois pas comment le changer.

Je sais que je pourrais simplement utiliser une image; Je préférerais ne pas le faire si je peux aider.

La solution

La balle tire sa couleur du texte. Donc, si vous souhaitez avoir une puce de couleur différente de celle du texte dans votre liste, vous devrez ajouter des balises.

Enroulez le texte de la liste sur une étendue:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Modifiez ensuite légèrement vos règles de style:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

Autres conseils

Je me suis débrouillé sans ajouter de balises, mais plutôt avec li: before. Cela a évidemment toutes les limitations de : before (pas de vieux support IE), mais il semble fonctionner avec IE8, Firefox et Chrome après des tests très limités. Cela fonctionne dans notre environnement de contrôleur, se demandant si quelqu'un pourrait vérifier cela. Le style de la puce est également limité par ce qui est dans Unicode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

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

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

C'était impossible en 2008, mais cela devient possible bientôt (espérons-le)!

Selon la spécification W3C CSS3 , vous pouvez avoir le contrôle total sur tout nombre, glyphe ou autre symbole généré avant un élément de la liste avec le pseudo-élément :: marker . Pour appliquer cela à la solution la plus votée:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

Exemple JSFiddle

Notez cependant que, à compter de juillet 2016 , cette solution ne représente qu'une partie du brouillon de travail du W3C et ne fonctionne pas encore dans les principaux navigateurs.

Si vous souhaitez utiliser cette fonctionnalité, procédez comme suit:

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

Le gros problème de cette méthode est le balisage supplémentaire. (la balise span)

Bonjour, peut-être que cette réponse est en retard mais qu’elle est la bonne pour y parvenir.

Ok, le fait est que vous devez spécifier une balise interne pour que le texte LIst soit sur le noir habituel (ou ce que vous voulez obtenir). Mais il est également vrai que vous pouvez redéfinir toutes les balises et balises internes avec CSS. Donc, la meilleure façon de faire utilise une balise SHORTER pour la redéfinition

Utilisez cette définition CSS:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

Et ce code html:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

Vous obtenez le résultat requis. Aussi, vous pouvez faire chaque disque diferent couleur:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>

Créez simplement une puce dans un programme graphique et utilisez list-style-image :

ul {
  list-style-image:url('gray-bullet.gif');
}

Entourez le texte de l'élément de liste d'une étendue (ou d'un autre élément) et appliquez la couleur de la puce à l'élément de la liste et la couleur du texte à l'étendue.

Conformément aux spécifications du W3C ,

Les propriétés de la liste ... n'autorisent pas les auteurs à spécifier un style distinct (couleurs, polices, alignement, etc.) pour le marqueur de liste ...

Mais l'idée avec une portée dans la liste ci-dessus devrait bien fonctionner!

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

Vous pouvez utiliser Jquery si vous avez beaucoup de pages et n'avez pas besoin de modifier vous-même le balisage.

voici un exemple simple:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});

Pour une question de 2008, je pensais pouvoir ajouter une réponse plus récente et plus à jour sur la manière de modifier la couleur des puces dans une liste.

Si vous souhaitez utiliser des bibliothèques externes, Font Awesome vous fournit des icônes vectorielles évolutives , et lorsqu'il est combiné avec les les classes d'assistance de Bootstrap (par exemple, text-success ), vous pouvez créer des listes assez sympas et personnalisables.

J'ai développé l'extrait de la page d'exemples de la liste Font Awesome . ci-dessous:

Utilisez fa-ul et fa-li pour remplacer facilement les puces par défaut des listes non ordonnées.

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

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Font Awesome (principalement) prend en charge IE8 et ne prend en charge que IE7 si vous utilisez la version 3.2.1 .

Cela fonctionne également si nous définissons la couleur de chaque élément, par exemple: J'ai ajouté une marge à gauche maintenant.

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}

Vous pouvez utiliser CSS pour atteindre cet objectif. En spécifiant la liste dans la couleur et le style de votre choix, vous pouvez également spécifier le texte en tant que couleur différente.

Suivez l'exemple sur http://www.echoecho.com/csslists.htm . .

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Deux

Trois

Il suffit d'utiliser CSS:

<li style='color:#e0e0e0'>something</li>

Vous souhaitez définir un " style de liste " via CSS, et lui donner une couleur: valeur. Exemple:

ul.colored {list-style: color: green;}

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow