Outils HTML

Gratuit Customizable Select Generator

Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.

Chargement de l'outil...

Qu'est-ce que Customizable Select Generator ?

L'element select personnalisable est une nouvelle fonctionnalite CSS qui permet de styliser les elements HTML select natifs sans les remplacer par des structures div pilotees par JavaScript. En utilisant appearance: base-select, vous pouvez styliser l'icone du picker, les coches des options et le popup de la liste deroulante tout en conservant toute l'accessibilite integree et le comportement de formulaire d'un vrai element select.

Réponse rapide

Stylisez les elements select natifs avec appearance: base-select (Chrome 135+). Utilisez ::picker-icon pour les fleches de la liste deroulante, option::checkmark pour les indicateurs de selection et ::picker(select) pour le style du popup. La semantique native du formulaire et l'accessibilite clavier sont preservees.

Last updated: 2026-05-28

Limites

Le select personnalisable est une fonctionnalite tres recente (Chrome 135+) et pas encore dans la CSS Baseline. Firefox et Safari ne le supportent pas encore.
Tous les aspects du select ne sont pas personnalisables. La mise en page de la liste d'options, le comportement de defilement et l'interface utilisateur mobile restent controles par le navigateur.
Les pseudo-elements ::picker-icon et option::checkmark font partie du modele de select personnalisable et ne peuvent pas etre utilises sur d'autres elements.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

Saisissez les options du select sous forme de paires valeur|etiquette, une par ligne.
Choisissez le style de l'icone du picker (chevron, SVG personnalise ou aucun) et le style de coche (coche, point ou aucun).
Incluez optionnellement le style de l'etat ferme et les notes de repli navigateur.
Copiez le HTML et le CSS generes. Le select fonctionne comme un element de formulaire natif dans tous les navigateurs.

A quoi il sert

Styliser un selecteur de pays pour correspondre a un systeme de conception de marque sans bibliotheque de select personnalisee.
Creer un selecteur de langue stylise qui conserve la semantique native du formulaire et l'accessibilite clavier.
Construire un selecteur de theme avec des icones de coche personnalisees.

Cas d'usage

Exemples concrets

Exemple

Selecteur de pays de marque

Un formulaire de paiement a besoin d'une liste deroulante de pays qui corresponde au design du site. Utilisez un select personnalisable avec une icone chevron, des couleurs de marque et une coche pour l'option selectionnee.

Exemple

Liste deroulante de changement de theme

Un site de documentation a un selecteur de theme clair/sombre. Stylisez le select avec appearance: base-select et une icone SVG personnalisee.

Erreurs frequentes

S'attendre a ce que le select personnalisable fonctionne dans tous les navigateurs - il nécessite Chrome 135+.
Utiliser appearance: none au lieu de appearance: base-select - le premier supprime tout le style natif incluant les roles d'accessibilite.
Oublier que base-select n'est pas encore dans la CSS Baseline - testez toujours et fournissez un select natif lisible comme repli.

Vérification

Testez le select dans Chrome 135+ pour confirmer que le style personnalise s'affiche correctement.
Testez dans Firefox et Safari pour verifier que le select revient a une apparence native lisible.

FAQ

Questions sur Customizable Select Generator

Quelle est la difference entre appearance: none et appearance: base-select ?

appearance: none supprime TOUT le style natif du select, incluant la fleche deroulante, et peut casser l'accessibilite. appearance: base-select conserve la semantique native et le comportement clavier tout en permettant de styliser les parties visuelles.

Quels navigateurs supportent le select personnalisable ?

Chrome 135+ avec 'Experimental Web Platform Features' active. C'est une fonctionnalite tres recente et pas encore dans la CSS Baseline. Utilisez @supports (appearance: base-select) pour appliquer les styles personnalises.

Outils lies