Changer la couleur d'une puce dans une liste html?

86

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

Je sais que je pourrais simplement utiliser une image; Je préfère ne pas faire ça si je peux l'aider.

html css html-lists

— Dave Haynes
source

J'irais simplement avec une image moi-même et éviterais le balisage supplémentaire. C'est probablement la solution la plus efficace

— Sam Murray-Sutton

8

Qui se soucie du balisage "supplémentaire" comme ça ... sérieusement, vous ne perdez rien en le faisant.

159

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

Enveloppez le texte de la liste dans une plage:

<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 */
}

— Prestaul
source

Exactement ce dont j'avais besoin! J'ai une liste de liens et les liens ont déjà un style de couleur différent qui leur est appliqué de toute façon.

— Dave Haynes

Ce n'est pas la meilleure façon de procéder. Par exemple, cela ne fonctionnera pas lorsque vous avez un cms avec un éditeur WYSIWYG. Les éléments <span> ne seront pas rendus. Ce que vous voudrez peut-être, c'est travailler avec: avant et: après et laisser de côté les bulles elles-mêmes. C'est en fait une très mauvaise pratique.

— Automagisch

2

@KoenHoutman, au moment où cela a été écrit (2008), c'était la seule technique avec un soutien raisonnable. Même aujourd'hui, ce n'est pas une mauvaise pratique et c'est toujours la technique avec le support de navigateur le plus large, même si je suis d'accord qu'aujourd'hui (dans la plupart des cas) j'opterais pour l'utilisation :beforecomme dans la réponse de Marc ci-dessous.

— Prestaul

Puisque vous ne modifiez que la présentation du texte, une bbalise serait plus appropriée.

— Supuhstar

45

J'ai réussi cela sans ajouter de balisage, mais à la place en utilisant 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. Cela fonctionne dans notre environnement de contrôleur, en se demandant si quelqu'un pourrait vérifier cela. Le style de puce est également limité par ce qui est en 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>

— Marc
source

C'est la manière la plus moderne avec CSS3, par rapport à la réponse acceptée

— minni

17

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

Selon la spécification CSS3 du W3C , vous pouvez avoir un contrôle total sur n'importe quel nombre, glyphe ou autre symbole généré avant un élément de liste avec le ::markerpseudo-élément. Pour appliquer ceci à la solution de la réponse 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 qu'à partir de juillet 2016 , cette solution n'est qu'une partie du projet de travail du W3C et ne fonctionne pas encore dans les principaux navigateurs.

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

— Supuhstar
source

6

<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)

— Jonathan Arkell
source

Puisque vous ne modifiez que la présentation du texte, une bbalise serait plus appropriée.

— Supuhstar

1

Quand cela a été écrit, la balise b était en train d'être obsolète au profit de la balise forte. Mais oui, vous avez raison, maintenant la balise ab serait plus appropriée.

— Jonathan Arkell

3

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 cela 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. Vous pouvez également faire de chaque disque une couleur différente:

<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>

vous devez utiliser <span>. également, <b> est obsolète.

— the_drow

2

Le contre-point à @the_drow, <b> n'est pas obsolète. stackoverflow.com/questions/1348683/…

— Strixy

La définition d'une couleur par défaut appliquée à un sélecteur spécifique a résolu mon problème. Merci pour cette astuce.

— David le

2

Faites simplement une puce dans un programme graphique et utilisez list-style-image:

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

— ghr
source

1

Le PO ne voulait explicitement pas utiliser une image, mais je suis tombé sur cela à la recherche d'un moyen général de remplacer la balle. Je pense donc que cette réponse est intéressante pour être complète.

— Zane

En voici un avec cercle SVG, que l'on peut coloriser facilement:

list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='#ff0000' /%3E%3C/svg%3E");

— Ciantic

0

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

0

Selon les spécifications du 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 un span dans la liste ci-dessus devrait bien fonctionner!

— Temps infini
source

0

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

0

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

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
});

— alaasdk
source

0

Pour une question de 2008, j'ai pensé que je pourrais ajouter une réponse plus récente et à jour sur la façon dont vous pourriez changer la couleur des puces dans une liste.

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

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

Utilisez fa-ulet fa-lipour 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>

Développer l'extrait

Font Awesome (principalement) prend en charge IE8 , et ne prend en charge IE7 que si vous utilisez l' ancienne version 3.2.1 .

— oeuf
source

0

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

— Mohammed
source

-1

Vous pouvez utiliser CSS pour y parvenir. En spécifiant la liste dans la couleur et le style de votre choix, vous pouvez également spécifier le texte comme une couleur différente.

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

-1

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

Un

Deux

Trois

— NerdFury
source

-2

Utilisez simplement CSS:

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

— Diodeus - James MacFarlane
source

Ouais c'est ce que je pensais aussi ... mais le style li couleur change la couleur du texte ainsi que la puce.

— Aeon

-5

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

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

— Ahockley
source