Changement des balles de couleur d'une liste HTML sans utiliser span
Je me demandais si il existe un moyen de changer la couleur sur les puces dans une liste.
J'ai une liste comme ceci:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
Il n'est pas possible pour moi d'insérer n'importe quoi dans la li comme un 'span' og 'p'. Donc, puis-je changer la couleur de la balle, mais pas le texte dans une certaine façon intelligente?
Vous devez vous connecter pour publier un commentaire.
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
Voir
list-style-image
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.
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
J'ai géré ce, sans l'ajout d'une annotation, mais au lieu d'utiliser
li:before
. 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. Le style de puce est également limité par ce qui est en unicode.CSS:
HTML:
font-size:1em
pour mieux doser la balle!)On peut combiner
list-style-image
avecsvg
s, que nous pouvons inline css! Cette méthode offre un contrôle incroyable sur les "puces", qui peut devenir n'importe quoi.Pour obtenir un cercle rouge, il suffit d'utiliser le code css suivant:
Mais ce n'est que le début. Cela nous permet de faire quelque chose de fou que nous voulons, avec ces balles. des cercles ou des rectangles sont faciles, mais tout ce que vous pouvez dessiner avec
svg
vous pouvez vous en tenir là! Découvrez le point de mire exemple ci-dessous:CSS:
HTML:
Largeur/hauteur attributs
Certains navigateurs besoin
width
etheight
attributs pour être mis sur le<svg>
, ou ils ne rien afficher. Au moment de la rédaction, les versions récentes de Firefox présentent ce problème. J'ai mis les deux attributs dans les exemples.Codages
Un récent commentaire m'a rappelé de codages pour les data-uri. C'était une douleur pour moi récemment, et je peux partager un peu d'information que j'ai recherché.
La data-uri spec, qui fait référence à la URI spec, dit que le svg doit être codé en fonction de la URI spec. Cela signifie que toutes sortes de caractères doivent être encodés, par exemple,
<
devient%3C
.Certaines sources suggèrent l'encodage base64, qui devrait corriger des problèmes de codage, cependant, il va augmenter inutilement la taille du SVG, alors que l'encodage des URI ne sera pas. Je recommande de l'encodage des URI.
Plus d'infos:
navigateur-support: >ie8
css astuces sur svgs
mdn sur svgs
<svg>
code, essayer de l'exécuter via un uri de l'encodeur en premier.Construction d' @Marc solution -- depuis que la puce est rendu différemment avec différentes polices et des navigateurs, j'ai utilisé le suivant css3 technique avec border-radius pour faire une balle que j'ai plus de contrôle sur:
Je sais que c'est vraiment, vraiment, une vieille question, mais j'ai été jouer avec cela et est venu avec une façon que je n'ai pas vu posté. Donner la liste une couleur puis de remplacer la couleur du texte à l'aide de
::first-line
sélecteur. Je ne suis pas expert donc peut-être il ya quelque chose de mal avec cette approche que je suis absent, mais il semble fonctionner.CSS:
HTML:
Bâtiment à la fois @Marc et @jessica solutions - C'est la solution que j'utilise:
- Je utiliser
em
pour les tailles de police donc, si vous réglez votretop
de la valeur de la.5em
il sera toujours placé au milieu de votre première ligne de texte. J'ai utiliséleft:-20px
parce que c'est la position par défaut de balles dans les navigateurs: parentpadding/2
J'ai vraiment aimé la réponse de Marc - je besoin d'un ensemble de couleurs différentes ULs et évidemment, ce serait plus facile que d'utiliser une classe. Voici ce que j'ai utilisé pour orange, par exemple:
Plus, j'ai trouvé que le code hex que j'ai utilisé pour "contenu:" était différente de celle de Marc (qui hex cercle semblait s'asseoir un peu trop élevé). Celui que j'ai utilisé semble rester parfaitement dans le milieu. J'ai aussi trouvé plusieurs autres formes (carrés, triangles, cercles, etc.) ici
Pour moi, la meilleure option est d'utiliser CSS éléments pseudo, donc pour
disc
balle de style, il devrait ressembler à cela:CSS:
HTML:
Notes:
width
etheight
devraient avoir les mêmes valeurs pour garder les pointeurs arrondieborder-radius
à zéro si vous voulez avoirsquare
liste des ballesPour plus de balles de styles que vous pouvez utiliser d'autres css formes https://css-tricks.com/examples/ShapesOfCSS/ (choisissez ce qui ne nécessite pas de pseudo éléments de travail, par exemple, les triangles)
Bâtiment sur @ddilsaver de réponse. Je voulais être en mesure d'utiliser un sprite pour la balle. Cela semble fonctionner:
J'ai essayé aujourd'hui et tapé ceci:
J'avais besoin de couleur de l'affichage des marqueurs dans mes listes (à la fois des puces et des numéros). Je suis venu sur ce astuce et écrit dans ma feuille de style, avec la mutualisation des propriétés:
J'ai choisi un personnage différent pour afficher une balle, en regardant ici. J'avais besoin de régler la marge accoardingly, peut-être que les valeurs ne s'appliquent pas avec la police que vous choisissez (les numéros d'utiliser votre webfont).
Essayez d'utiliser ceci à la place: