Glass select

Ce qui est inclus

Un menu déroulant au look verre dépoli, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — on les copie dans un projet et ça marche.

Le composant ne remplace pas le <select> du navigateur : il se pose dessus. Le select d’origine reste dans la page, porte le name, la valeur, la validation required et l’appartenance au formulaire. Choisir une option déclenche change sur lui — tout le code déjà écrit continue de fonctionner sans être modifié.

Fonctionnalités

• Clavier complet — flèches, Entrée, Espace, Début, Fin, Échap, Tab, et la saisie des premières lettres d’une option pour y sauter.
• Verre dépoli par option — chaque ligne floute le fond pour elle-même, et les options tombent en cascade à l’ouverture.
• Marche sans JavaScript — tant que le script n’a pas tourné, c’est le select du navigateur qui s’affiche, au même style.
• Une variable pour l’échelle — toutes les mesures dérivent de la taille du texte : hauteur, arrondi, marges et chevron suivent ensemble.
• Gère le HTML natif — <optgroup>, options désactivées, texte d’invite, listes longues, et l’ouverture vers le haut quand la place manque en bas.
• Deux variantes — échelle de formulaire et version pour fond clair.

Le poser dans une page

Deux fichiers à charger, puis le balisage habituel :

<link rel="stylesheet" href="glass-select.css">
<script src="glass-select.js" defer></script>

<div class="glass-select" data-glass-select>
  <label class="glass-select__label" for="offre">Choisir une offre</label>
  <select class="glass-select__native" id="offre" name="offre">
    <option value="starter">Starter</option>
    <option value="pro" selected>Pro</option>
    <option value="enterprise">Enterprise</option>
  </select>
</div>

C’est tout : l’attribut data-glass-select suffit, le composant s’installe au chargement de la page.

Ce qu’il faut savoir

• Le verre prend la couleur de ce qui passe dessous. Un menu ouvert au-dessus d’un bloc blanc devient blanc, et son texte clair disparaît. C’est la nature du flou d’arrière-plan, pas un défaut : sur une page qui alterne fonds clairs et sombres, on réserve la place du menu ou on bascule sur la variante claire.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML : le texte d’une option venant d’une base de données ne peut pas injecter de balise.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, relevées au pixel sur son visuel. Le code, lui, est original : rien n’a été repris de son implémentation.