::picker-icon
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
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
Chargement…
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