`<select>` peut désormais être personnalisé en CSS

 (developer.chrome.com)
8 points par xguru 2025-03-28 | 4 commentaires | Partager sur WhatsApp
  • À partir de Chrome 135, une nouvelle fonctionnalité permet de personnaliser l’élément <select> en CSS tout en conservant les standards d’accessibilité
  • Après des années d’ajustements de spécification et de développement, elle est fournie sous la forme d’un composant robuste qui ne se casse pas dans les anciens navigateurs
  • Il est aussi possible d’y inclure du contenu HTML et, avec l’ajout de appearance: base-select, divers types de personnalisations deviennent possibles, comme les animations et les styles

Présentation de appearance: base-select

  • La nouvelle propriété CSS appearance: base-select place l’élément <select> dans un nouvel état personnalisable 
    .custom-select {  
  &, &::picker(select) {  
    appearance: base-select;    
  }  
}

  • Nouvelles fonctionnalités apportées par base-select

    • Modification du comportement du parseur HTML du navigateur pour le contenu interne de <select>
    • Modification du mode de rendu et de la structure interne
    • Mise à disposition de nouvelles parties internes et de nouveaux états
    • Fournit un design par défaut minimal (optimisé pour la personnalisation)
    • L’option affichée apparaît dans la couche supérieure, comme un popover
    • La position des options peut être contrôlée avec anchor()

  • Fonctionnalités supprimées avec base-select

    • Impossible de rendre <select> en dehors de la fenêtre du navigateur
    • L’interface de sélection native de l’OS mobile n’est pas invoquée
    • La largeur de l’élément ne reflète plus celle de l’<option> la plus longue

Il est désormais possible d’inclure du contenu HTML dans <select>

  • Auparavant, si l’on insérait une image ou un SVG dans <option>, le navigateur l’ignorait
  • En appliquant appearance: base-select, le HTML est rendu tel quel
  • Dans Chrome, les options contenant du SVG sont visibles, mais Safari, Firefox et d’autres ne le prennent pas en charge
  • Démo CodePen : lien de démonstration
  • Cette fonctionnalité est introduite via une expérimentation Finch et peut être désactivée si nécessaire

Personnalisation complète possible

  • Tous les composants de base-select peuvent être remplacés, animés et stylés
  • Il devient possible de concevoir des interfaces de sélection variées et porteuses de sens
  • Parmi les exemples : affichage d’état, options avec avatar, sélecteur de couleurs, sélection de statut de publication, etc.
  • Démo CodePen : lien de démonstration

L’interface JavaScript ne change pas

  • Le comportement JavaScript existant pour <select> reste identique
  • En revanche, si du HTML a été inséré dans <option>, la méthode d’analyse de la valeur sélectionnée a changé et doit donc être testée
  • Si vous utilisez l’attribut value, aucune modification supplémentaire n’est nécessaire

Ressources complémentaires

Standards du Web

Ressources liées à Chrome

Ressources de la communauté

Démonstrations utilisant un <select> personnalisé

À lire aussi

4 commentaires

 
GN⁺ 2025-04-01
Avis sur Hacker News

  • Le fait que je sois disproportionnellement enthousiaste à propos de cette fonctionnalité trahit probablement le développeur web du début des années 2000 qui est en moi. C’est une fonctionnalité très utile, car l’élément select offre des capacités impossibles à reproduire en HTML

    • Il faut maintenant ajouter l’autocomplétion et un sélecteur de tags

  • Tant que cette fonctionnalité n’est pas largement prise en charge, il faut l’utiliser comme amélioration progressive. D’après caniuse.com, elle est actuellement prise en charge à 46 % dans le monde

    • Il faut veiller à ne pas offrir une mauvaise expérience aux utilisateurs de navigateurs qui ne la prennent pas en charge
    • Il est important de ne pas inclure d’informations ou de fonctionnalités essentielles dans le nouveau style

  • Je suis très heureux de voir cette fonctionnalité implémentée. Ce sera une amélioration bien plus importante que les remplacements personnalisés de boîtes de sélection

  • Je suis préoccupé par le fait que cela ne déclenche pas les composants natifs du système d’exploitation mobile. Les composants natifs sont fiables, accessibles et réactifs

    • C’est rassurant de pouvoir compter sur l’interface Android lorsqu’elle s’ouvre. Cela s’applique non seulement à l’élément select, mais aussi aux champs de date/heure

  • Pour certains contrôles, il vaut mieux ne pas appliquer de style. Dans le cas des barres de défilement, elles sont parfois trop fines ou avec un contraste de couleur trop faible, ce qui les rend difficiles à utiliser

    • L’élément select par défaut n’est pas le plus joli des contrôles, mais il remplit sa fonction

  • On dirait quelque chose que les développeurs web attendaient depuis des décennies. Cela pourrait remplacer de nombreuses bibliothèques JS

    • Je n’ai pas Chrome installé, mais je me demande comment les champs de sélection multiple sont gérés dans la vidéo de démonstration

  • Il est désormais possible de personnaliser en CSS l’élément select dans les navigateurs Chromium

    • Les standards du web deviennent de plus en plus complexes

  • Un lien vers le ticket Firefox est fourni

  • Si on continue comme ça, on aura bientôt une parité fonctionnelle avec VB6

  • C’est mieux que des bibliothèques JS cassées. Mais ma principale préoccupation est la façon dont la mise en page se comporte quand il y a beaucoup d’options

    • Le fait que cela ne déclenche pas les composants natifs du système d’exploitation mobile me fait peur. Je me demande comment la mise en page se comporte
    • Les options affichées sont positionnées avec anchor()
    • C’est expérimental, mais c’est probablement la meilleure partie. Si cela fonctionne vraiment en CSS, ce sera incroyable
 
carnoxen 2025-03-28

Du coup, &lt;selectlist&gt; ne devient plus nécessaire ?
 
deminoth 2025-03-28

Petite parenthèse : dans le bot Slack, le <select> du titre ne s’affiche pas, haha.
 
xguru 2025-03-28

Ah, je corrigerai ça plus tard.