web-dev-qa-db-fra.com

Personnaliser les puces d'éléments de liste à l'aide de CSS

Est-il possible de changer la taille du bullet d'un élément <li>?

Regardez le code ci-dessous:

li {
    list-style: square; // I want to change the size of this squared bullet. 
}

Je n'arrive pas à trouver le moindre moyen d'y parvenir.

csssizehtml-listslistitem
24
Alex

Vous voulez dire changer la taille de la balle, je suppose? Je crois que cela est lié à la taille de la police de la balise li. Ainsi, vous pouvez agrandir la taille de la police pour le LI, puis la réduire pour un élément contenu à l'intérieur. C'est un peu nul de pouvoir ajouter du balisage supplémentaire, mais quelque chose comme:

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

Vous pouvez également spécifier un fichier image pour les puces de votre liste, qui pourrait être aussi volumineux que vous le souhaitez:

ul{
  list-style: square url("38specialPlusP.gif");
 }

Voir: http://www.w3schools.com/css/css_list.asp

31
adc

Vous pouvez envelopper le contenu de la li dans un autre élément tel que span. Puis, donnez à li un font-size plus grand et définissez un font-size normal sur span:

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>
19
thirtydot

Basé sur @dzimney answer et similaire à @Crisman answer (mais différent):

Cette réponse est bonne mais a un problème de retrait (les puces apparaissent à l'intérieur de li scope). Vous ne voulez probablement pas cela. Voir exemple de liste simple ci-dessous (il s'agit d'une liste HTML par défaut):

  • Lorem ipsum dolor sit amet, e off cumend partiendo iudicabit. À la quaestio honestatis, le duo cherche affert persecuti ei. Etiam nusquam cu sa, alter nec alterum posidonium philosophia te. Nec un purto iudicabit, pas de vix quod clita expetendis.

  • Quem suscipiantur no eos, inscrivez-vous, mais vous perdez tout votre sens. Vide vide, mais vous ne voulez pas, ça marche. Conte original, son essentiel, appelantur et cum.

Mais si vous utilisez la réponse mentionnée, la liste sera comme ci-dessous (en ignorant la taille des puces):

• Lorem ipsum dolor sit amet, e off cumend partiendo iudicabit. À la quaestio honestatis, le duo cherche affert persecuti ei. Etiam nusquam cu sa, alter nec alterum posidonium philosophia te. Nec un purto iudicabit, pas de vix quod clita expetendis.

• Quem suscipiantur no eos, imped explicari ea, falli inermis comprehensam est in. Vide désenchanté cum, vous ne pouvez pas compter, mais vous avez tout à fait raison.

Je recommande donc cette approche qui résout le problème: 

li {
    list-style-type: none;
    position: relative;    /* It is required for setting position to absolute in the next rule. */
}

li::before {
    content: '\2022';      /* Unicode for • character */
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}
<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

13
Mir-Ismaili

Selon le niveau de support requis IE, vous pouvez également utiliser le sélecteur: before avec le style de puce défini comme propriété de contenu.

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

Vous devrez peut-être rechercher le style de puce souhaité dans le fichier HTML ASCII et utiliser un convertisseur pour la valeur CSS Hex.

11
dzimney

Une autre façon de changer la taille des balles serait:

  1. Désactiver complètement les balles
  2. Rajoutez les puces personnalisées à l'aide du pseudo-élément ::before.

Exemple: 

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}
<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

Aucune modification de marquage nécessaire

3
Alexander Lomia

Je suppose que vous parlez de la taille de la puce au début de chaque élément de la liste. Si c'est le cas, vous pouvez utiliser une image à la place:

list-style-image:url('bigger.gif');
list-style-type:none;

Si vous vouliez dire la taille réelle de l'élément li, vous pouvez le changer normalement avec width et height.

2
James Allardice
<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>
0
MattF

Si vous emballez votre contenu <li> dans une balise <span> ou une autre balise, vous pouvez modifier la taille de la police du <li>, ce qui modifiera la taille de la puce, puis réinitialiser le contenu du <li> à sa taille d'origine. Vous pouvez utiliser em unités pour redimensionner la puce <li> proportionnellement.

Par exemple:

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

Puis CSS:

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

Un exemple plus complexe:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

Résulte en:

 Result of markup

0
Havok

Vous devez utiliser une image pour modifier la taille réelle ou la forme de la puce elle-même:

Vous pouvez utiliser une image d'arrière-plan avec un rembourrage approprié pour déplacer le contenu afin qu'il ne se superpose pas:

list-style-image:url(bigger.gif);

ou

background-image: url(images/bullet.gif);
0
Dan

Si vous ne souhaitez pas insérer le contenu dans votre <li>s avec <span>s, vous pouvez également utiliser :before comme ceci:

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

Ajustez vos tailles de police sur le :before à votre guise.

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>
0
Crisman