Comment définir les couleurs des puces dans les listes HTML UL/LI via CSS sans utiliser d'images ou de balises de portée [dupliquer]

cette question a déjà une réponse ici:

Imaginez une simple liste non triée avec quelques articles <li> . Maintenant, j'ai défini les balles pour être carré en forme de via list-style:square; cependant, si je mettez la couleur des articles <li> avec color: #F00; puis tout devient rouge!

pendant que je veux seulement régler la couleur des balles carrées. Y at-il un voie élégante pour définir la couleur des balles dans CSS...

...sans utiliser d'images sprite ni de balises span!

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}
472
demandé sur Sam 2011-03-15 04:50:29
la source

16 ответов

la façon la plus courante de faire ceci est quelque chose dans ce sens:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}
<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

fonctionnera dans tous les navigateurs, y compris IE à partir de la version 8 et plus.

973
répondu Lea Verou 2017-01-26 21:33:23
la source

navigation il y a quelque temps, trouvé ce site, Avez-vous essayé cette alternative?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

semble dur, mais vous pouvez faire votre propre image png/motif ici , puis copier/coller votre code et personnaliser vos balles =) reste élégant?

EDIT:

suivant l'idée de @lea-verou sur l'autre réponse et en appliquant cette philosophie d'amélioration des sources externes j'ai venez à cette autre solution:

  1. intégrer dans votre tête la feuille de style de la Webfont icônes de la Bibliothèque, dans ce cas, la Police Génial:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

  1. prenez un code de FontAwesome cheatsheet (ou toute autre icône webfont).
i.e.:
fa-angle-right [&#xf105;]

et utiliser la dernière partie de F... suivi par un nombre comme ceci, avec le font-family aussi:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

et c'est tout! maintenant que vous avez personnalisé balle de conseils de trop =)

violon

87
répondu Facundo Colombier 2015-10-07 23:28:58
la source

la spécification courante du CSS 3 Liste le module spécifie le ::marker pseudo-élément qui ferait exactement ce que vous voulez; FF a été testé ne pas soutenir ::marker et je doute que soit Safari ou L'Opéra l'ait. IE, bien sûr, ne le soutient pas.

donc en ce moment, la seule façon de faire ceci est d'utiliser une image avec list-style-image .

je suppose que vous pourriez envelopper le contenu de un li avec un span et ensuite vous pourriez définir la couleur de chacun, mais cela me semble un peu hackish.

44
répondu Alex 2015-03-25 23:45:59
la source

Je résous simplement ce problème comme ceci, qui devrait fonctionner dans tous les navigateurs:

HTML:

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

CSS:

ul li{
    color: red
}

ul li span{
    color: blue;
}
44
répondu mdthh 2015-04-19 09:18:39
la source

Une façon de le faire est d'utiliser li:before avec content: "" et le style comme inline-block élément.

voici un extrait de code de travail:

ul {
  list-style-type: none; /* no default bullets */
}

li { 
  font-family: Arial;
  font-size: 18px;
}

li:before { /* the custom styled bullets */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}
<ul>
  <li>Swollen joints</li>
  <li>Pain in hands and knees</li>
  <li>Redness around joints</li>
  <li>Constant fatigue</li>
  <li>Morning stiffness in joints</li>
  <li>High fevers</li>
  <li>Rheumatoid nodules, which develop around joints</li>
</ul>
37
répondu Rahul Desai 2018-01-10 21:03:16
la source

pourtant, une autre solution est d'utiliser un :before pseudo élément avec un border-radius: 50% . Cela fonctionnera dans tous les navigateurs, y compris IE 8 et plus.

L'utilisation de l'unité em permet de réagir aux changements de taille de police. Vous pouvez le tester, en redimensionnant votre fenêtre jsFiddle.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

Vous pouvez même jouer avec le box-shadow pour créer certains de belles ombres, quelque chose qui ne sera pas joli avec la solution content: "• " .

23
répondu Jose Rui Santos 2015-06-29 10:44:51
la source

j'utilise jQuery pour ceci:

jQuery('li').wrapInner('<span class="li_content" />');

et avec un peu de CSS:

li { color: red; }
li span.li_content { color: black; }

peut-être exagéré, mais pratique si vous codez pour un CMS et vous ne voulez pas demander à vos éditeurs de mettre une portée supplémentaire dans chaque liste-éléments.

17
répondu Veerle Verbert 2011-06-04 17:01:16
la source

j'ai essayé ça et les choses sont devenues bizarres pour moi. (css a cessé de fonctionner après la partie :after {content: "";} de ce tutoriel. J'ai trouvé que vous pouvez colorer les balles en utilisant simplement color:#ddd; sur l'article li lui-même.

voici un exemple .

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}
17
répondu Benito 2015-04-19 09:14:37
la source

je recommande de donner le LI a background-image et padding-left . L'attribut list-style-image est flasque dans les environnements de navigation croisée, et l'ajout d'un élément supplémentaire, tel qu'une portée, est inutile. Votre code ressemblerait donc à ceci:

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}
10
répondu Philip Schweiger 2015-04-19 09:19:32
la source

la chose la plus facile que vous pouvez faire est d'envelopper le contenu du <li> dans un <span> ou l'équivalent alors vous pouvez définir la couleur indépendamment.

alternativement, vous pouvez faire une image avec la couleur de balle que vous voulez et la mettre avec la propriété list-style-image .

8
répondu Adam Bryzak 2011-03-15 04:56:05
la source

une variante de Lea Verou solution avec une indentation parfaite dans les entrées multilignes pourrait être quelque chose comme ceci:

ul{
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
}

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}
8
répondu David 2017-05-23 14:47:22
la source

j'ajoute ma solution à ce problème.

Je ne veux pas utiliser l'image et le validateur vous punira pour avoir utilisé des valeurs négatives dans CSS, donc je vais par là:

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }
6
répondu Kovo 2014-02-08 14:58:44
la source

je sais que c'est un peu une réponse tardive pour ce post, mais pour la référence...

CSS

ul {
    color: red;
}

li {
    color: black;
}

la couleur de la balle est définie sur l'étiquette ul et ensuite nous changeons la couleur li en arrière.

5
répondu webster76 2013-07-26 14:00:29
la source

Lea Verous solution est bonne, mais je voulais plus de contrôle sur la position de la balle c'est donc mon approche:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}
3
répondu Henning Fischer 2015-09-11 15:54:05
la source

en prenant la démo de Lea, voici une autre façon de faire des listes sans ordre, avec des frontières: http://jsfiddle.net/vX4K8/7 /

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            </ul>
        </ul>
</ul>

CSS

ul {
list-style: none;
margin: 0;
}

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}
2
répondu 2013-12-29 02:58:44
la source

ça ira..

li{
  color: #fff;
}
-13
répondu Magicprog.fr 2016-01-15 12:43:20
la source

Autres questions sur