Sélecteur de vitesses automatique
Un levier de boîte automatique glisse le long de la grille P, R, N, D et la lettre choisie s'allume en ambre.
Réglages
Code
<fieldset class="uvq04-gear"><legend>Vitesse</legend><div class="pn"><span class="gt" aria-hidden="true"><i class="kb"></i></span><div class="ls"><label><input type="radio" name="uvq04-gear" checked><b>P</b><span>Parking</span></label><label><input type="radio" name="uvq04-gear"><b>R</b><span>Marche arrière</span></label><label><input type="radio" name="uvq04-gear"><b>N</b><span>Point mort</span></label><label><input type="radio" name="uvq04-gear"><b>D</b><span>Conduite</span></label></div></div></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Ce groupe de boutons radio reprend le levier d'une voiture automatique : quatre vrais inputs radio longent une grille sombre, et un pommeau rond descend jusqu'à la position choisie pendant que sa lettre brille comme l'éclairage du tableau de bord. Le tout tient en CSS avec :has et convient aux configurateurs auto, aux applis de conduite et aux réglages à ordre fixe.
Change la lueur ambrée avec la couleur principale et la teinte de la console avec la secondaire. Renomme les quatre modes selon ton produit, par exemple éco, confort, sport et circuit, et garde des libellés courts pour aligner les lignes.