Cette page a été traduite par l'API Cloud Translation.

L'élément peut désormais être personnalisé avec CSS .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links { display: flex; } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } Adam Argyle X GitHub Glitch Page d'accueil Publié le 24 mars 2025 À partir de Chrome 135, les développeurs et concepteurs Web peuvent enfin s'accorder sur un élément <select> accessible, standardisé et stylable en CSS sur le Web. Ce composant a nécessité de nombreuses années de travail d'ingénierie et de spécifications collaboratives. Le résultat est un composant incroyablement riche et puissant qui ne plante pas dans les anciens navigateurs. Voici une vidéo montrant comment utiliser ces nouvelles fonctionnalités pour créer des sélections personnalisées: avec des démonstrations de Una, Brecht et Adam. Si vous avez suivi attentivement les actualités, vous remarquerez que certains noms et fonctionnalités de spécifications ont changé depuis la demande d'avis de la communauté de Una. Heureusement, si vous avez travaillé sur cet article et que vous souhaitez savoir ce qui a changé, Una est là pour vous aider. Vous trouverez également une nouvelle documentation sur MDN pour la sélection personnalisable, qui regorge d'informations. Rencontrer appearance: base-select Nouvelle propriété CSS appearance: base-select qui met l'élément <select> dans un nouvel état configurable et stylable, communément appelé "style de base" : .custom-select { &, &::picker(select) { appearance: base-select; } } L'utilisation de base-select débloque un certain nombre de nouvelles fonctionnalités et de nouveaux comportements: Modifie l'analyseur HTML du navigateur pour le contenu de <select>. Modifie les éléments internes affichés de <select>. Exposer de nouvelles parties et états internes pour le <select> Nouveau look minimaliste, optimisé pour la personnalisation. Les options affichées se trouvent dans la couche supérieure, comme un pop-up. Options affichées avec anchor(). L'utilisation de base-select perd un certain nombre de fonctionnalités et de comportements: <select> ne s'affiche pas en dehors du volet du navigateur. Il ne déclenche pas les composants du système d'exploitation mobile intégrés. Le <select> cesse de prendre la largeur du <option> le plus long. D'autres apparences de base pour d'autres éléments seront développées au fil du temps. Un <select> peut désormais inclure du contenu HTML enrichi Avant de pouvoir personnaliser un <select>, si vous insérez des éléments tels qu'une image ou un SVG dans l'élément <option>, le navigateur les ignore. Prenons l'exemple de code HTML suivant. Le navigateur le lirait comme vous l'avez écrit: <select class="custom-select"> <option> <svg aria-hidden>…</svg> <span>HTML</span> </option> <option> <svg aria-hidden>…</svg> <span>CSS</span> </option> <option> <svg aria-hidden>…</svg> <span>JavaScript</span> </option> <option> <svg aria-hidden>…</svg> <span>WASM</span> </option> </select> Toutefois, le DOM utilisé n'incluait pas <svg>: <select class="custom-select"> <option> <span>HTML</span> </option> <option> <span>CSS</span> </option> <option> <span>JavaScript</span> </option> <option> <span>WASM</span> </option> </select> Voici (de gauche à droite) Chrome, Safari et Firefox qui affichent le code HTML précédent. Si le navigateur est compatible avec appearance: base-select, le SVG s'affiche dans l'option. Sinon, il ne s'affiche pas. Essayez-le dans ce Codepen. En raison des modifications apportées à l'analyseur, il existe un risque de casser les sites Web existants avec une sélection personnalisable. Chrome dispose des fonctionnalités d'un test Finch au cas où vous auriez besoin de l'arrêter de toute urgence. Si tout se passe bien, le test prendra fin et le code sera intégré de manière permanente dans la source. Entièrement personnalisable Chaque partie d'un base-select peut être remplacée, personnalisée et animée. Voici une démonstration qui utilise toutes les nouvelles fonctionnalités pour créer des expériences sélectionnées reconnaissables et significatives. Essayez-le dans ce Codepen. Vous trouverez de nombreux autres exemples dans la section "Ressources" à la fin de cet article. Interfaces JavaScript inchangées Vos interactions JavaScript existantes avec un élément <select> ne présentent aucun risque. Toutefois, si vous commencez à ajouter du code HTML enrichi à vos éléments <option>, vous devez tester les valeurs sélectionnées, car le navigateur analyse toujours les images et les SVG, et les ignore. La logique de détermination de la chaîne de contenu sélectionnée a toutefois changé. En fonction de vos options, vous devrez peut-être apporter des ajustements. Si vous utilisez l'attribut value sur un <option>, vous n'avez pas à vous inquiéter. Ressources Chrome est le premier navigateur à implémenter base-select, mais tous les navigateurs ont participé aux spécifications, et d'autres éléments de base doivent encore être finalisés. Ce n'est que le début. Nous vous tiendrons informé des conseils, exemples et ressources que nous ajouterons pour personnaliser certains éléments. En attendant, consultez les liens suivants pour en savoir plus. Normes Web Ouvrir UI-Select Demande de tirage de la spécification HTML Intent to Ship MDN Chrome Request for Comments et excellente vidéo d'explication sur Una Résultats de la demande d'avis Utiliser <hr> dans un <select> Una explique les différentes pièces Une collection Codepen d'Una Communauté Collection Codepen de Brecht De Ruyte Astuces CSS sur les sélections natives et personnalisées Ouvrir l'UI Props-<select> Exemple de sélection personnalisée avec des animations de transition Un grand merci à tous ceux qui ont contribué à ce projet ! Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées. Dernière mise à jour le 2025/03/24 (UTC). Contribuer Signaler un bug Afficher les questions en suspens Contenu associé Mises à jour de Chromium Études de cas Archiver Podcasts et émissions Suivre @ChromiumDev sur X YouTube Chrome pour les développeurs sur LinkedIn RSS Conditions d'utilisation Règles de confidentialité Manage cookies English Deutsch Español – América Latina Français Indonesia Italiano Nederlands Polski Português – Brasil Tiếng Việt Türkçe Русский עברית العربيّة فارسی हिंदी বাংলা ภาษาไทย 中文 – 简体 中文 – 繁體 日本語 한국어