Tout ce que je veux, c'est être en mesure de modifier la couleur d'une balle dans une liste à un gris clair. La valeur par défaut est noir, et je ne peux pas comprendre comment le changer.
Je sais que je pourrais simplement utiliser une image; je préfère ne pas le faire si je peux l'aider.
La balle obtient sa couleur dans le texte. Donc, si vous voulez avoir une différence de couleur de puce de texte dans votre liste, vous devrez ajouter un peu de balisage.
Envelopper le texte de la liste dans une durée de:
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
Modifiez ensuite votre style de règles légèrement:
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
J'ai géré ce, sans l'ajout d'une annotation, mais plutôt à l'aide de li:avant. De toute évidence, cela a toutes les limites de l' :before (pas de vieux IE support), mais il semble fonctionner avec IE8, Firefox et Chrome après quelques tests très limités. Il travaille dans notre contrôleur de l'environnement, de l'demandais si quelqu'un pouvait vérifier ce point. 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>
C'était impossible en 2008, mais il est devenu possible en 2013!
Selon http://www.w3.org/TR/css3-lists/#marker-pseudoelementvous pouvez avoir un contrôle complet sur n'importe quel nombre, glyphe, ou d'un autre symbole généré avant un élément de la liste avec l' ::markerpseudo-élément.
Pour appliquer ce pour le plus voté réponse de la solution:
<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 */
}
Notez, cependant, que dès le mois de juin 2014, cette solution est uniquement par le W3C proposition et ne fonctionne pas dans tous les principaux navigateurs, encore.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
