::picker-icon
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
Le pseudo-élément CSS ::picker-icon cible l'icône de sélection à l'intérieur des contrôles de formulaire qui ont une icône associée. Dans le cas d'un élément <select> personnalisable, il sélectionne l'icône de flèche affichée sur l'élément <select> qui pointe vers le bas lorsqu'il est fermé.
Syntaxe
::picker-icon {
/* ... */
}
Description
Le pseudo-élément ::picker-icon cible l'icône de sélection des contrôles de formulaire, c'est-à-dire l'icône affichée sur le bouton du contrôle. Il n'est disponible que si l'élément d'origine possède un sélecteur et que l'apparence de base lui est appliquée via la propriété appearance avec la valeur base-select. Sa boîte générée apparaît après celles générées par le pseudo-élément ::after, avec l'icône définie dans la feuille de style par défaut du navigateur. Vous pouvez la personnaliser à l'aide de la propriété content.
Le sélecteur ::picker-icon peut être utilisé pour cibler la flèche orientée vers le bas du côté en ligne de fin d'un élément select personnalisable. Cela est utile, par exemple, si vous souhaitez personnaliser la couleur ou la taille de l'icône, utiliser une autre icône (en utilisant content ou SVG), ou l'animer à l'ouverture et à la fermeture du sélecteur.
La sélection des icônes de sélecteur des éléments <select> personnalisables est actuellement le seul cas d'utilisation de ::picker-icon, mais d'autres pourraient être ajoutés à l'avenir.
Note :
Le pseudo-élément ::picker-icon n'est pas inclus dans l'arbre d'accessibilité, de sorte que tout content généré qui lui est appliqué ne sera pas annoncé par les technologies d'assistance. Vous devez néanmoins vous assurer que toute nouvelle icône définie a un sens visuel par rapport à l'objectif prévu.
Exemples
Animer l'icône du sélecteur
Pour activer la fonctionnalité de <select> personnalisable, l'élément <select> et son sélecteur doivent tous deux avoir une valeur appearance de base-select appliquée :
select,
::picker(select) {
appearance: base-select;
}
Vous pouvez ensuite cibler le ::picker-icon et lui appliquer une color personnalisée et une transition afin que les changements de sa propriété rotate soient animés en douceur :
select::picker-icon {
color: #999999;
transition: 0.4s rotate;
}
Dans la règle suivante, ::picker-icon est combiné avec la pseudo-classe :open — qui cible l'icône uniquement lorsque le sélecteur est ouvert — pour la faire pivoter à une valeur de 180deg lorsque l'élément <select> est ouvert.
select:open::picker-icon {
rotate: 180deg;
}
Voir Mettre en forme l'icône du sélecteur pour un exemple complet utilisant ce code, accompagné d'un exemple interactif.
Spécifications
| Specification |
|---|
| CSS Form Control Styling Level 1 # picker-icon |
Compatibilité des navigateurs
Loading…
Voir aussi
- Les éléments
<select>,<option>,<optgroup>,<label>,<button>et<selectedcontent> - La propriété
appearance ::picker(select),::checkmark:open,:checked- Éléments
<select>personnalisables