Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Formulaires✨ Premium

Select Animated

Vrai menu déroulant natif restylé en CSS : bordure indigo et chevron dessiné qui pivote vers le haut tant que le champ a le focus, liste du système conservée.

CSSTransformSelect

Mis à jour le

Select Animated — aperçu ▶ Compte gratuit : aperçu en direct + 1 effet offert

Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →

Voir dans le catalogue

3 exemples d'usage

Fuseau horaire d'une invitation à une réunion entre deux bureaux — Select Animated exemple 1

① Fuseau horaire d'une invitation à une réunion entre deux bureaux

QuandEn préparant le point trimestriel avec le bureau de Montréal, l'organisatrice ouvre « Fuseau horaire » : la bordure se fonce, le chevron pivote vers le haut, elle choisit Montréal et la ligne en dessous convertit aussitôt l'horaire pour les collègues de Paris.
PourquoiLe fuseau est un petit réglage qu'on change rarement mais qu'on ne doit pas rater : un vrai select garde la liste du système, avec sa recherche par première lettre, et le chevron qui pivote montre que le champ est actif.
Réglages--slx-w: 196px dans une ligne de formulaire, couleurs passées au bleu #4b6cb7 (bordure et chevron), options sur fond blanc. La conversion sous le champ est affichée par la scène à l'événement change ; dans la capture, la scène choisit Montréal au premier focus (la liste native n'est pas capturée) puis quitte le champ.
Tri des annonces d'une recherche immobilière — Select Animated exemple 2

② Tri des annonces d'une recherche immobilière

QuandAu-dessus de la liste, l'acheteur passe le tri de « Pertinence » à « Prix croissant », au clavier (Tab puis flèche bas) ou à la souris : les annonces se réordonnent aussitôt.
PourquoiUn tri est un choix unique parmi peu d'options, qui doit rester compact dans une barre ; le select natif laisse le clavier et le mobile fonctionner sans code.
Réglages--slx-w: 190px, select compact (13 px, chevron 8 px), couleur sarcelle #0f766e. Le réordonnancement est fait par la scène à l'événement change.
Date, heure et couverts dans le widget de réservation d'un restaurant — Select Animated exemple 3

③ Date, heure et couverts dans le widget de réservation d'un restaurant

QuandDans la carte de réservation, trois menus côte à côte ; le client touche « Couverts », passe à 4 personnes et le bouton devient « Réserver pour 4 ».
PourquoiTrois selects identiques donnent un formulaire court et régulier ; sur téléphone, chacun ouvre le sélecteur natif, bien plus simple au pouce qu'une liste maison.
RéglagesTrois .slx-field dans une grille, --slx-w: 100%, couleur orange #f2a46a sur fond brun, options sur fond sombre. Chaque select est nommé par son <label> visible.

Comment ça marche

L'effet garde un <select> natif : seule son apparence change. appearance: none retire la flèche du système, une bordure de 2 px rgba(99,102,241,.3) et des coins de 10 px l'habillent, et le texte prend la couleur de son parent (color: inherit). La liste qui s'ouvre reste celle du navigateur, et sur mobile le sélecteur natif du téléphone (roue sur iPhone, liste plein écran sur Android).

Le chevron est le pseudo-élément ::after du conteneur .slx-field : un carré de 10 px dont seules les bordures droite et basse sont tracées, tourné de 45°. Quand le select a le focus, .slx-field:focus-within::after le tourne à −135° (vers le haut) en 0,3 s et la bordure passe en #6366f1 plein ; au focus clavier s'ajoute un halo clair. Il pivote donc au focus et non à l'ouverture de la liste : après un choix à la souris, il reste vers le haut tant que le champ garde le focus, et redescend quand on passe à autre chose.

Aucun JavaScript. La largeur vaut --slx-w (280 px par défaut, 100% pour remplir une colonne) ; les classes sont préfixées slx-.

Accessibilité

  • Nom accessible : le select porte aria-label="Votre choix" ; dans un formulaire, préférez une étiquette visible en entourant le tout d'un <label> (« Fuseau horaire »), qui nomme le champ sans id.
  • Clavier natif : Tab, flèches, première lettre d'une option, Alt + flèche bas pour ouvrir : tout fonctionne puisque c'est le contrôle du navigateur.
  • Focus visible : bordure indigo pleine au focus, plus un halo rgba(165,180,252,.45) au focus clavier (:focus-visible).
  • Mobile : la liste est celle du système, avec sa taille de texte et ses réglages d'accessibilité.
  • Mouvement réduit : sous prefers-reduced-motion: reduce, le chevron et la bordure changent sans transition.

Compatibilité navigateur

CSS seul : appearance: none sans préfixe (Chrome 84, Firefox 80, Safari 15.4), :focus-within, ::after. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : choix à la souris, Tab puis flèche, deux copies indépendantes, 390 px, mouvement réduit. Le style des <option> (fond #1a1a2e) n'est appliqué que par Chrome, Edge et Firefox sous Windows et Linux ; macOS et iOS affichent leur liste système.

Chrome 86+✓ Complet (mesuré)
Firefox 85+✓ Complet (mesuré)
Safari 15.4+✓ Complet (mesuré dans WebKit), liste système
Edge 86+✓ Complet (moteur Chromium)
Mobile iOS 15.4+✓ Sélecteur natif, non vérifié sur appareil
Android Chrome 86+✓ Complet, sélecteur natif

Sans appearance: none, la flèche du système s'affiche en plus du chevron dessiné ; le menu reste entièrement utilisable.

Le code

Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :

index.html — structure 
<div class="fx-0298-root">
  <div class="slx-field">
    <select name="choix" aria-label="Votre choix">
      <option value="">Choisir une option...</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
</div>

Paiement unique, sans abonnement — le code est à toi pour toujours

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
Largeur (CSS — --slx-w) 280px 100% pour remplir la colonne d'un formulaire ; le champ ne dépasse jamais son conteneur (max-width: 100%).
Couleur (CSS — border-color au focus et bordures de .slx-field::after) #6366f1, bordure au repos à 30 % Changez les trois ensemble pour un champ cohérent au repos et au focus.
Rotation du chevron (CSS — .slx-field:focus-within::after) rotate(-135deg) en .3s Supprimez la règle pour un chevron fixe, ou allongez la transition.
Liste ouverte (CSS — select option) fond #1a1a2e, texte blanc Sur fond clair, passez à fond blanc et texte sombre ; ignoré par Safari et iOS.
Nom et étiquette (HTML — name, aria-label ou <label>) choix · « Votre choix » Remplacez par le vrai nom du champ ; une étiquette visible vaut mieux qu'un aria-label.
Cadre de démo (CSS — .fx-0298-root) min-height 300px, fond #0a0a0f, texte blanc À retirer dans une vraie page ; le texte du select suit alors la couleur de la page.

FAQ

Il suit le focus, pas l'ouverture de la liste : après un choix à la souris, le champ garde le focus. Il redescend dès qu'on clique ailleurs ou qu'on passe au champ suivant. Les navigateurs ne donnent pas d'état « liste ouverte » fiable partout.
Très peu : la liste appartient au système. Fond et couleur du texte marchent sous Windows et Linux, pas sur macOS ni iOS. Pour une liste entièrement dessinée, il faut un composant JavaScript avec role="listbox", au prix du sélecteur natif sur mobile.
Mettez value="" sur la première option (c'est déjà le cas) et required sur le select : le formulaire refuse l'envoi tant qu'une vraie option n'est pas choisie.