HTML + CSSBoutons radio

Bobines de fil de couleur

Des bobines de fil en bois sur une étagère : la bobine choisie monte, tourne et laisse filer un brin qui frise.

Réglages

Couleur principale#c9965c

Couleur secondaire#7a5230

Taille16px

Vitesse1x

Texte

Code

index.html

<fieldset class="uvq04-spl"><legend>Couleur du fil</legend><div class="rw"><label style="--c:#c8323a"><input type="radio" name="uvq04-spl" checked><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Coquelicot</span></label><label style="--c:#24365e"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Marine</span></label><label style="--c:#d39a2a"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Moutarde</span></label><label style="--c:#2f6b4a"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Vert bouteille</span></label><label style="--c:#e6dcc6"><input type="radio" name="uvq04-spl"><span class="sp" aria-hidden="true"><i class="bd"></i></span><svg class="th" viewBox="0 0 24 40" aria-hidden="true"><path pathLength="1" d="M15 0C18 9 5 12 10 21S21 31 9 39"/></svg><span class="nm">Écru</span></label></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Boutons radio

Voir tout : Boutons radio

Bouton radio à rebond

Boutons radioHTML + CSS

Radio à anneau dessiné

Boutons radioHTML + CSS

Sélecteur à pastille glissante

Boutons radioHTML + CSS

Cartes radio avec icône

Boutons radioHTML + CSS

Radio à point sauteur

Boutons radioHTML + CSS

Radio à remplissage liquide

Boutons radioHTML + CSS

Onglets verticaux lumineux

Boutons radioHTML + CSS

Sélecteur de formules

Boutons radioHTML + CSS

Où l’utiliser

Cinq bobines de fil à coudre en bois sont posées sur une petite étagère, chacune étant un vrai input radio. La bobine choisie se soulève, le fil enroulé défile comme si elle tournait et un brin libre se dessine en dessous avec un tracé SVG. Idéal pour une mercerie, des kits de broderie ou les coloris d'un produit.

La couleur de chaque fil se règle dans le style de son libellé : remplace-les par ta propre gamme. La couleur principale teinte les joues en bois et la secondaire l'étagère ; garde des noms d'un seul mot court.