Question Comment définir les couleurs Bullet dans les listes html UL / LI via CSS sans utiliser d'images ni de balises span [dupliquer]


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

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

Alors que je veux seulement définir la couleur des balles carrées. Y'a-t-il un manière élégante définir la couleur des puces en CSS ...

... sans utiliser aucune image de sprite ni aucune balise span!

HTML

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

CSS

li{
   list-style:square;
}

460
2018-03-15 01:50


origine


Réponses:


La façon la plus courante de le faire est quelque chose de ce genre:

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/

Fonctionne dans tous les navigateurs, y compris IE à partir de la version 8.


956
2018-03-15 07:42



il y a quelque temps, vous avez 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 / motif png ici, puis copier / coller votre code et personnaliser vos balles =) encore élégant?

MODIFIER:

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

  1. incorporer dans votre tête la feuille de style de la bibliothèque d'icônes Webfont, dans ce cas, Font Awesome:

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

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

et utilisez la dernière partie de f ... suivie d'un nombre comme celui-ci, 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 vous avez aussi des astuces sur les balles personnalisées =)

violon


86
2017-10-31 02:46



La spécification actuelle du Listes CSS 3 le module spécifie le ::marker pseudo-élément ce qui ferait exactement ce que vous voulez; FF a été testé ne pas supporter ::marker et je doute que Safari ou Opera l'ait. IE, bien sûr, ne le supporte pas.

Donc, maintenant, la seule façon de faire est d'utiliser une image avec list-style-image.

Je suppose que vous pourriez envelopper le contenu d'un li avec un span et puis vous pouvez définir la couleur de chacun, mais cela me semble un peu piquant.


44
2018-03-15 01:55



Je résous simplement ce problème comme celui-ci, 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
2017-10-20 13:31



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

Voici un extrait de code fonctionnel:

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
2017-08-03 22:36



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

En utilisant le em L'unité 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 de belles ombres, quelque chose qui ne sera pas agréable avec le content: "• " Solution.


23
2017-12-04 07:06



J'utilise jQuery pour cela:

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

& avec quelques CSS:

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

peut-être exagéré, mais pratique si vous codez pour un CMS et que vous ne voulez pas demander à vos rédacteurs de mettre un intervalle supplémentaire dans chaque élément de liste.


17
2018-06-04 13:01



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

Voici un Exemple.

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

a:hover {
    background-color: #ddd;
}

16
2017-11-27 18:30