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.   https://youtu.be/PlldXyuTnUw?embedable=true  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   sur notre étiquette ainsi qu'un simple CSS pour créer l'apparence que nous recherchons. ::before  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   et le sélecteur de frère adjacent sur notre étiquette : :checked   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   et le sélecteur de frère adjacent avec l'étiquette : :focus   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é !   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps