La mise en forme des commandes de formulaire telles que l'élément <select> est signalée comme l'un des principaux problèmes rencontrés par les développeurs depuis des années, et nous travaillons sur une solution. Bien que ce travail soit complexe et qu'il ait fallu beaucoup de temps pour le mener à bien, nous sommes sur le point de lancer cette fonctionnalité. Une version personnalisable de l'élément select est officiellement à l'étape 2 dans le WHATWG, avec un fort intérêt pour les différents navigateurs et un prototype que vous pouvez tester à partir de Chrome Canary 130.
Essayez-le et donnez-nous votre avis
Vérifiez que votre installation de Chrome Canary est mise à jour vers la version 130 et que le flag des fonctionnalités expérimentales de la plate-forme Web est activé. Vous pouvez activer ce flag en accédant à chrome://flags dans votre barre d'adresse et en activant #experimental-web-platform-features. Vous devriez alors pouvoir voir les démonstrations Codepen dans cet article. Vous pouvez également consulter cette collection Codepen pour les afficher tous au même endroit.
Utilisez ce formulaire pour nous faire part de vos commentaires sur la fonctionnalité. Cela ne vous prendra que trois minutes.
Découvrons les fonctionnalités de l'API de sélection personnalisable, qui s'appuie sur la balise HTML "select" existante.
Activer la nouvelle version de <select>
Pour activer le nouveau comportement, utilisez la propriété CSS appearance à la fois sur le bouton de sélection de la page et sur le sélecteur. Pour l'activer, définissez appearance: base-select sur votre élément <select> et sur ::picker(select).
::picker(select) est un nouveau pseudo-élément fourni par l'user-agent qui ne s'applique qu'aux éléments <select> qui ont été activés pour le nouveau comportement à l'aide de appearance: base-select. Ce pseudo-élément de sélecteur est le popover déclenché par le bouton de sélection de base. Vous pouvez activer les deux, comme indiqué dans le code suivant :
select,
::picker(select) {
appearance: base-select;
}
Vous pouvez choisir d'activer uniquement le bouton sur la page, mais vous ne pouvez pas activer uniquement le popover du sélecteur sans activer le bouton sur la page. ::picker(select) n'est créé qu'une fois que appearance: base-select est appliqué à <select>.
Vous êtes maintenant prêt à personnaliser votre élément de sélection. Le nouvel élément select personnalisable est fourni avec des styles par défaut qui ont la même apparence sur tous les navigateurs et systèmes d'exploitation. Voici à quoi ressemble l'élément select personnalisé par défaut par rapport à l'élément select existant dans Chrome sur macOS :
Décomposer les parties
Une fois que vous êtes dans le nouveau mode de sélection personnalisable, vous avez accès aux nouveaux éléments suivants :
- selectedoption : reflète le code HTML interne de l'option actuellement sélectionnée.
- option::before : contient une coche pour indiquer l'option actuellement sélectionnée comme affordance d'accessibilité par défaut (susceptible d'être modifiée).
- ::picker(select) : popover contenant tout le contenu en dehors de button dans un élément select personnalisable.
Vous pouvez styliser n'importe quelle partie de l'élément select. Par exemple, vous pouvez ajouter du contenu non interactif arbitraire dans les éléments <option>, styliser le bouton sur la page qui ouvre le menu déroulant de sélection et styliser la liste déroulante d'options (::picker(select)).
Vous pouvez également styliser l'indicateur de flèche button que vous fournissez, et ajouter du contenu arbitraire à l'intérieur et autour de n'importe quel élément. En plus d'ajouter du contenu, vous pouvez masquer n'importe lequel de ces nouveaux éléments et styles par défaut. Par exemple, si vous ne souhaitez pas que l'indicateur de coche s'affiche dans le pseudo-élément ::before de l'option, utilisez le code CSS suivant.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Bien qu'il puisse y avoir un nombre illimité d'éléments dans votre sélection, le navigateur regroupera tout ce qui se trouve en dehors d'un élément <button> dans le pseudo-élément ::picker(select), qui se comporte comme un popover ancré au bouton. Ce <button> active/désactive le ::picker(select). Les options et les autres éléments directement à l'intérieur de l'élément select seront hissés dans le ::picker(select). Vous pouvez également utiliser votre propre wrapper à des fins de style. Ce wrapper sera également placé dans le pseudo-élément ::picker(select).
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Le nouvel élément <select> personnalisable utilise les fonctionnalités de popover et de positionnement d'ancrage. Il est basé sur ces deux technologies sous-jacentes. Cela signifie que la liste d'options du menu déroulant d'un élément select agit comme un popover ancré au bouton de déclenchement qui ouvre l'élément select.
Vous pouvez utiliser le positionnement d'ancrage pour styliser ce popover ::picker(select) (y compris pour l'ancrer à d'autres éléments). Ce modèle de contenu signifie également que les styles d'animation de la couche supérieure fonctionnent avec la liste d'options pour animer les effets d'entrée et de sortie.
Améliorer l'élément <select> existant
Auparavant, l'équipe Chrome travaillait sur l'idée d'un élément <selectlist>. Cet article décrit la refonte de cette fonctionnalité, qui réutilise désormais l'élément <select> existant.
L'un des principaux avantages de la réutilisation de l'élément <select> existant est la possibilité d'améliorer progressivement l'élément HTML de base. Par rapport à un tout nouvel élément, la réutilisation de <select> permet d'afficher un contenu pertinent sur votre page. L'exemple suivant montre la sélection personnalisée par rapport à ce qu'un utilisateur verrait dans un navigateur non compatible :
option est affiché dans la version de remplacement de l'élément select.Style de base
Les modifications peuvent être aussi simples que le style visuel de l'élément de sélection. Par exemple, pour modifier les styles des boutons, les styles de survol et de sélection, ou l'arrière-plan des options de sélection. Après avoir activé appearance: base-select, appliquez le CSS de votre choix aux parties de votre élément select.
Pour personnaliser l'indicateur en forme de flèche, ajoutez votre propre bouton et votre propre flèche dans l'élément select.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Ensuite, appliquez un style à la flèche :
/* style the arrow */
button span {
/* arrow styles */
transition: rotate 0.2s;
}
/* adjust arrow styles when the picker is open */
select:open button span {
rotate: -180deg;
}
Contenu complexe dans les options
Allez plus loin en ajoutant et en stylisant du contenu au-delà des chaînes dans les éléments <option> de <select>. Un exemple simple consiste à ajouter des images de drapeaux à côté des noms de pays dans un menu déroulant. Pour ce faire, ajoutez un élément d'image à côté du texte de l'option.
<option value="france">
<img src="img/flag_of_france.svg" alt="" />
<span>France</span>
</option>
Un exemple plus complexe peut inclure des photos de profil, des noms et d'autres informations pour vous aider à choisir l'élément à sélectionner dans le menu déroulant.
<option value="eur">
<img src="euro-flag.png" alt="" />
<div class="currency">
<div class="currency-short">EUR</div>
<div class="currency-long">Euro</div>
</div>
<div class="symbol" aria-hidden="true">€</div>
</option>
Appliquer un style à l'option sélectionnée
Vous pouvez souhaiter que l'option sélectionnée s'affiche différemment dans l'état sélectionné que dans le menu déroulant. Par exemple, dans l'UI de Gmail, le libellé est supprimé une fois l'option sélectionnée pour gagner de l'espace. Pour ce faire, associez-le à l'élément <selectedoption> pour le style. <option> contient l'ensemble du balisage suivant :
<option value="reply-all">
<img class="material-symbol" src="material-symbol-reply.png">
<span class="text">Reply all</span>
</option>
Appliquez maintenant display: none sur .text dans <selectedoption> pour masquer le contenu textuel et n'afficher que l'icône :
selectedoption .text {
display: none;
}
Options interactives
En contrôlant entièrement le style de ::picker(select), appuyez-vous sur la démonstration précédente pour la rendre interactive au survol et au focus. Dans cette démonstration, la nouvelle fonction calc-size() est utilisée pour animer la largeur du sélecteur, de l'affichage des icônes à l'affichage de la largeur complète des options au survol ou si la sélection comporte une option avec focus-visible.
/* base styles when picker is open but not interacted with */
::picker(select) {
width: var(--icon-width);
transition: width 0.5s;
}
/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
/* auto width! */
width: calc-size(auto, size + 0.5rem);
}
Limites et remarques sur l'accessibilité
Un grand pouvoir implique de grandes responsabilités Pour que la fonctionnalité reste accessible, certaines limites s'appliquent.
- À l'exception des éléments
<option>, aucun élément interactif (pouvant être sélectionné), tel que des boutons ou d'autres éléments, n'est encore autorisé dans l'élément<select>. Pour l'instant, le modèle de contenu proposé n'autorise que les éléments<div>,<span>,<option>,<optgroup>,<img>,<svg>et<hr>. - Les boutons partagés sont actuellement en phase d'expérimentation, car nous cherchons une solution accessible.
À l'avenir, le modèle de contenu devrait être étendu pour être plus flexible, à mesure que l'histoire de l'accessibilité de ces expériences sera étoffée.
Conclusion
Nous sommes ravis de voir cette fonctionnalité progresser au sein des groupes de travail et des organismes de normalisation, et de partager nos progrès à mesure que nous développons activement le prototype et évaluons la forme de cette fonctionnalité. Si vous rencontrez un problème, n'hésitez pas à nous en faire part.
Cette fonctionnalité est encore en cours de développement, mais nous aimerions connaître votre avis. Pour nous le donner, remplissez ce court formulaire de commentaires.
Merci de nous aider à faire les choses correctement et à faciliter la création de commandes de formulaire accessibles et personnalisables sur le Web.