web-dev-qa-db-fra.com

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

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 l'aider.

htmlcsshtml-lists
81
Dave Haynes

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

Enveloppez le texte de la liste dans un intervalle:

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

Puis modifiez légèrement vos règles de style:

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

J'ai réussi ceci sans ajouter de balisage, mais en utilisant plutôt li: before. Cela a évidemment toutes les limitations de :before (pas de support ancien 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>
44
Marc

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

Selon La spécification CSS3 du W3C , 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 .

<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 juillet 2016 _, cette solution n'est qu'une partie du brouillon de travail du W3C et ne fonctionne pas encore dans les principaux navigateurs.

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

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

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

5
Jonathan Arkell

Il suffit de créer une puce dans un programme graphique et d’utiliser list-style-image:

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

Bonjour, peut-être que cette réponse est en retard mais 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 tous les tags 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>
2
Dragnovich

Enveloppez le texte dans l'élément de liste avec une étendue (ou un autre élément) et appliquez la couleur de puce à l'élément de liste et la couleur de texte à l'étendue.

0
user4903

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

Selon Spéc. W3C , 

Les propriétés de la liste ... ne permettent pas aux auteurs de 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!

0
Aeon

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
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

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

Si vous voulez utiliser des bibliothèques externes, Font Awesome vous donne des icônes vectorielles évolutives , et une fois combiné avec les classes auxiliaires de Bootstrap (par exemple, text-success), vous pouvez créer des fonctions plutôt cool des listes.

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

Utilisez fa-ul et fa-li pour remplacer facilement les puces par défaut dans les 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 IE7 que si vous utilisez la ancienne version 3.2.1 .

0
eggy