Je me demandais s'il y avait un moyen de changer la couleur des puces dans une liste.
J'ai une liste comme celle-ci:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
Il ne m'est pas possible d'insérer quoi que ce soit dans les li, comme un "span" ou un "p". Alors, puis-je changer la couleur des puces mais pas le texte de façon intelligente?
J'ai réussi ceci sans ajouter de balisage, mais en utilisant plutôt li: before. Cela a évidemment toutes les limitations de: avant (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 contrôlé, en 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>
Si vous pouvez utiliser une image, vous pouvez le faire. Et sans une image, vous ne serez pas en mesure de modifier la couleur de la balle et ne pas le texte.
À l'aide d'une image
li { list-style-image: url(images/yourimage.jpg); }
Voir
Sans l'aide d'une image
Ensuite, vous devez modifier le balisage HTML et comprennent un span à l'intérieur de la liste et de la couleur de la li et la durée de couleurs différentes.
Construire à partir de la solution de @ Marc - étant donné que le caractère de la puce est rendu différemment avec des polices et des navigateurs différents, j'ai utilisé la technique CSS3 suivante avec border-radius pour créer une puce sur laquelle j'ai plus de contrôle:
li:before {
content: '';
background-color: #898989;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-right: 4px;
top: 2px;
}
Construire à la fois les solutions @Marc et @jessica - C’est la solution que j’utilise:
li {
position:relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}
J'utilise em pour les tailles de police. Par conséquent, si vous définissez votre valeur top sur .5em elle sera toujours placée au centre de votre première ligne de texte. J'ai utilisé left:-20px parce que c'est la position par défaut des puces dans les navigateurs: parent padding/2
Construire sur la réponse de @ ddilsaver. Je voulais pouvoir utiliser un sprite pour la balle. Cela semble fonctionner:
li {
list-style: none;
position: relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 20px;
height: 20px;
left: -30px;
top: 5px;
background-image: url(i20.png);
background-position: 0px -40px; /* or whatever offset you want */
}
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.
