Comment styliser les boutons radio HTML : un guide étape par étape

Les boutons radio HTML sont un élément essentiel des formulaires Web, mais leur apparence par défaut laisse beaucoup à désirer. Dans cet article de blog, nous présenterons l'une de mes méthodes préférées pour personnaliser l'apparence des boutons radio à l'aide de CSS, créant ainsi une expérience plus conviviale et visuellement attrayante.

Commençons par masquer les boutons radio !

Nous devons commencer par reconnaître les limites du style multi-navigateur pour les boutons radio. Même s'il est frustrant de ne pas pouvoir les styliser directement, nous pouvons utiliser des solutions de contournement. Dans cet exemple, la première étape consiste à masquer l’entrée réelle du bouton radio. Je sais que cela semble étrange, mais nous savons que nous ne pouvons pas les styliser, nous devons donc simplement les retirer de l'équation.

Toutefois, cela doit être fait de manière accessible, en garantissant qu'il reste fonctionnel pour tous les utilisateurs. Ceci peut être réalisé en utilisant l'ensemble de styles suivant qui masquent visuellement le contenu tout en conservant sa convivialité :

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

Création des boutons radio personnalisés

Pour créer l'apparence personnalisée du bouton radio, nous utiliserons le pseudo-élément ::before sur notre étiquette ainsi qu'un simple CSS pour créer l'apparence que nous recherchons.

Pour notre exemple, le code HTML ressemble à ceci :

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

Pour commencer, nous allons ajouter les styles suivants à notre élément label :

 label { display: inline-flex; align-items: center; }

Cela garantira qu'une fois que nous aurons ajouté nos styles de boutons radio, ils seront correctement alignés verticalement avec le texte de l'étiquette.

Maintenant, nous allons ajouter nos boutons radio fictifs en utilisant le pseudo-élément ::before :

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

À ce stade, nous avons quelque chose qui commence à ressembler à une liste de boutons radio, mais si nous cliquons sur les radios, nous verrons que rien ne se passe. Bien que le pseudo-élément ressemble visuellement à un bouton radio, il manque d'interactivité car nous n'avons pas encore géré l'état coché.

Gestion des interactions et des états

Nous pouvons gérer l'état vérifié avec la pseudo-classe :checked et le sélecteur de frère adjacent sur notre étiquette :

 input[type="radio"]:checked + label { color: black; }

Pour le point intérieur, nous pouvons exploiter un dégradé radial sur notre pseudo-élément :

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Là, maintenant, lorsque nous cliquons dessus, ils fonctionnent un peu comme des boutons radio natifs. Et nous pouvons améliorer les interactions en ajoutant quelques effets de transition :

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

N'oublions pas la concentration

Pour améliorer l'accessibilité, nous devrons également nous pencher sur l'état ciblé des boutons radio fictifs. Cette fois, nous devrons utiliser la pseudo-classe :focus et le sélecteur de frère adjacent avec l'étiquette :

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Conclusion

En suivant cette méthode, nous pouvons créer des boutons radio personnalisés élégants et accessibles qui améliorent considérablement l'expérience utilisateur. Ces boutons radio personnalisés sont non seulement plus beaux que les boutons standard, mais peuvent également fournir de meilleurs retours et interactions lorsqu'ils sont correctement mis en œuvre.

Il s’agit d’un exemple assez simple qui n’est peut-être même pas très différent des styles de navigateur natifs, mais l’essentiel est qu’avec cette configuration, nous pouvons faire à peu près ce que nous voulons. N'hésitez donc pas à expérimenter les styles et à les adapter à la conception de votre projet.

Vous voulez le voir en action ?

Découvrez le code de démonstration et des exemples de cette technique dans l'exemple de code stylo ci-dessous. Si vous avez des questions ou des idées, n'hésitez pas à laisser un commentaire.

N'oubliez pas qu'avec un peu de créativité et un peu de CSS, vous pouvez transformer l'apparence des boutons radio HTML pour qu'ils correspondent à votre conception tout en conservant l'accessibilité et la convivialité !