Lepseudo-élémentCSS::picker() cible la partie sélecteur (picker) d'un élément, par exemple la liste déroulante d'unélément<select> personnalisable.

Syntaxe

::picker(<ident>) {  /* ... */}

Paramètres

<ident>

Une chaîne représentant l'élément dont vous souhaitez cibler le sélecteur. Les valeurs suivantes sont disponibles :

select

La liste déroulante des éléments<select> personnalisables.

Description

Le pseudo-élément::picker() cible la partie sélecteur d'un contrôle de formulaire, c'est‑à‑dire la partie contextuelle qui apparaît pour permettre une sélection lorsque l'on presse le bouton de contrôle. Il n'est disponible à la sélection que lorsque l'élément d'origine possède un sélecteur et que l'apparence de base lui est appliquée via la valeurbase-select de la propriétéappearance.

Le sélecteur::picker(select) cible tous les descendants d'un élément<select> personnalisable à l'exception du premier enfant<button> ; ces descendants sont groupés par le navigateur et rendus comme le sélecteur. Le premier<button> enfant représente le bouton de contrôle qui ouvre le sélecteur lorsqu'il est pressé.

Cela permet de cibler l'ensemble du contenu du sélecteur comme une seule entité, par exemple pour personnaliser sabordure, l'animer lorsqu'il apparaît et disparaît, ou le positionner ailleurs que sa position par défaut. Notre guideéléments<select> personnalisables montre de nombreux exemples d'utilisation de::picker(select).

Comportement du sélecteur en tant que popover

L'élément<select> et le sélecteur ont automatiquement une relation implicite invocateur/popover, telle que définie par l'API Popover. VoirUtiliser l'API Popover pour plus de détails sur le comportement des popovers, et voirAnimer le menu du sélecteur à l'aide des états de popover pour un cas d'usage typique rendu possible par cette association implicite.

Positionnement par ancre du sélecteur

Autre effet de la relation implicite invocateur/popover évoquée ci‑dessus : l'élément<select> et le sélecteur ont aussi une ancre implicite en référence, ce qui signifie que le sélecteur est automatiquement à l'élément via lepositionnement par ancrage en CSS. Cela présente plusieurs avantages, notamment :

• Les styles par défaut du navigateur positionnent le sélecteur relativement au bouton (l'ancre) et vous pouvez personnaliser cette position comme expliqué dansPositionner des éléments relativement à leur ancre. À titre de référence, les styles par défaut associés sont les suivants :

  css

  inset: auto;margin: 0;min-inline-size: anchor-size(self-inline);min-block-size: 1lh;/* Aller jusqu'au bord de la fenêtre et ajouter des barres de défilement si   nécessaire. */max-block-size: stretch;overflow: auto;/* En dessous et étendu vers la droite, par défaut. */position-area: block-end span-inline-end;

• Les styles par défaut du navigateur définissent aussi des alternatives de repli avecposition-try qui repositionnent le sélecteur s'il risque de déborder de la fenêtre d'affichage. Les options de repli sont expliquées dansOptions de repli et masquage conditionnel en cas de débordement. À titre de référence, les styles de repli par défaut associés sont les suivants :

  css

  position-try-order: most-block-size;position-try-fallbacks:  /* D'abord au-dessus et étendu vers la droite, */  /* puis en dessous mais étendu vers la gauche, */  /* puis au-dessus et étendu vers la gauche. */  block-start span-inline-end,  block-end span-inline-start,  block-start span-inline-start;

Exemples

Usage de base avec un sélecteur personnalisé

Pour activer la fonctionnalité de sélecteur personnalisable et les styles de base minimaux du navigateur (et retirer le style fourni par l'OS), il faut définir la valeurbase-select d'appearance à la fois sur l'élément<select> et sur son sélecteur :

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

On peut ensuite, par exemple, retirer labordure noire par défaut du sélecteur :

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les éléments HTML<select>,<option>,<optgroup>,<label>,<button> et<selectedcontent>
• Les pseudo-éléments::picker-icon,::checkmark
• Les pseudo-classes:open,:checked
• Éléments<select> personnalisables