::checkmark

Exemple interactif

<label for="pet-select">
  Sélectionnez un animal&nbsp;:
</label>
<br />
<select id="pet-select">
  <option value="cat">Chat</option>
  <option value="dog">Chien</option>
  <option value="chicken">
    Poule
  </option>
</select>

option::checkmark {
  color: orange;
  font-size: 1.5rem;
}

select,
::picker(select) {
  appearance: base-select;
  width: 200px;
}

select {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
}

::picker(select) {
  border: none;
}

option {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
}

option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:nth-of-type(odd) {
  background: white;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

Syntax

::checkmark {
  /* ... */
}

Description

Le pseudo-élément ::checkmark cible la coche placée à l'intérieur de l'élément <option> actuellement sélectionné d'un élément de sélection personnalisable.

Il n'est disponible pour le ciblage que lorsque l'élément d'origine a un sélecteur et a une apparence de base définie sur lui via la propriété appearance avec la valeur base-select. Sa boîte générée apparaît avant toutes les boîtes générées par le pseudo-élément ::before. L'icône peut être personnalisée à l'aide de la propriété content.

Le sélecteur ::checkmark est utile par exemple si vous souhaitez masquer la coche, utiliser une icône personnalisée ou ajuster la position de rendu de la coche à l'intérieur des éléments <option>.

Exemples

Personnalisation de la coche

Pour activer la fonctionnalité de sélection personnalisable, l'élément <select> et son sélecteur doivent tous deux avoir une valeur appearance de base-select définie sur eux :

select,
::picker(select) {
  appearance: base-select;
}

En considérant que flexbox est utilisé pour disposer les éléments <option> (ce qui est vrai dans les implémentations actuelles des sélections personnalisables), vous pourriez alors déplacer la coche du début de la ligne à la fin en définissant une valeur order supérieure à 0, et en l'alignant à la fin de la ligne en utilisant une valeur margin-left auto (voir l'Alignement et les marges automatiques).

La valeur de la propriété content pourrait également être définie sur un emoji différent pour changer l'icône affichée.

option::checkmark {
  order: 1;
  margin-left: auto;
  content: "☑️";
}

Lisez la Mise en forme de la coche de sélection actuelle pour un exemple complet qui utilise ce code, ainsi qu'un rendu d'exemple en direct.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les éléments HTML <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• La propriété appearance
• Les pseudos-éléments ::picker(select), ::picker-icon
• Les pseudo-classes :open, :checked
• Les éléments de sélection personnalisables