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

Question 1

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.

Question 2

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

Question 3

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>

Question 4

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:

Question 5

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

Question 6

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>

Question 7

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

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

Question 8

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.

Question 9

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!

Question 10

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

Question 11

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

Question 12

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 .

Question 13

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

Question 14

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 .

Question 15

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

Un

Deux

Trois

Question 16

Utilisez simplement CSS:

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

Question 17

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

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

Answer 1

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

Answer 2

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

Answer 3

8

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Supuhstar

Answer 9

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>

Answer 10

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

minni

Answer 11

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:

Answer 12

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

Answer 13

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

Supuhstar

Answer 14

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

Answer 15

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>

Answer 16

vous devez utiliser . également, est obsolète.

the_drow

Answer 17

2

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

Strixy

Answer 18

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

Answer 19

2

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

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

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

Answer 20

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

Answer 21

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

Answer 22

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.

Answer 23

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!

Answer 24

0

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

la source

Answer 25

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

Answer 26

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 .

Answer 27

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

Answer 28

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 .

Answer 29

-1

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

Un

Deux

Trois

NerdFury
la source

Answer 30

-2

Utilisez simplement CSS:

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

Diodeus - James MacFarlane
la source

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

Aeon

Answer 31

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

Aeon

Answer 32

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

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

Réponses: