HTML + CSSBoutons radio
Choix d'avatar
Cinq avatars en dégradé ; celui choisi grandit avec un anneau coloré et affiche son nom.
Réglages
16px
1x
Code
<fieldset class="uv-rav"><legend>Choisis ton avatar</legend><div class="gr"><label style="--a:#ff8a5c;--b:#ffd166"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🦊</span><span class="nm">Renard</span></label><label style="--a:#4f7bff;--b:#8fe3ff"><input type="radio" name="uv-rav" checked><span class="av" aria-hidden="true">🐳</span><span class="nm">Baleine</span></label><label style="--a:#22c55e;--b:#bef264"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐸</span><span class="nm">Grenouille</span></label><label style="--a:#a855f7;--b:#f9a8d4"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🦄</span><span class="nm">Licorne</span></label><label style="--a:#334155;--b:#94a3b8"><input type="radio" name="uv-rav"><span class="av" aria-hidden="true">🐧</span><span class="nm">Manchot</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.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Les inscriptions, les plateformes pour enfants et les applis communautaires proposent souvent un avatar par défaut avant l'envoi d'une photo. Chaque option est une pastille ronde en dégradé avec un animal ; celle choisie grandit avec un double anneau et son nom apparaît dessous, les autres rétrécissent un peu et s'estompent.
Remplace les emojis par des illustrations ou des initiales et ajuste chaque dégradé dans le code. La couleur de l'anneau vient de la couleur principale, et le choix part avec le formulaire.