Boutons radio personnalisés en CSS

Sommaire

Principe.
Socle HTML.
Socle CSS.
Démonstration.

Principe

Les boutons radio sont des éléments de formulaires qui permettent de sélectionner une option unique parmi un groupe d’options proposées.

Les boutons radio sont dits « personnalisés en CSS » lorsqu’ils sont construits sur la base du code HTML standard prévu pour ces éléments par la spécification : <input type="radio" />, mais que ces boutons radio standards sont masqués à l’écran puis personnalisés en CSS grâce à des images, des polices d’icônes ou des styles spécifiques.

De nombreuses approches sont envisageables. L’exemple ci-dessous expose comment personnaliser des boutons radio à l’aide de pseudo-éléments CSS et d’images d’arrière-plan, tout en conservant leur caractère accessible.

Socle HTML

<fieldset>
  <legend>Question</legend>
  <input type="radio" id="reponse-1" name="question" value="reponse-1" />
  <label for="reponse-1">Réponse 1</label>
  <input type="radio" id="reponse-2" name="question" value="reponse-2" />
  <label for="reponse-2">Réponse 2</label>
  [...]
</fieldset>

Socle CSS

label {
  padding: 0 0 0 2rem;
  position: relative;
}

input[type=radio] {
  position: absolute;
  opacity: 0;
}

input[type=radio] + label::before,
input[type=radio] + label::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

input[type=radio] + label::before {
  left: 0.5rem;
  top: 0.2rem;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border: 0.05rem solid black;
  background: white;
}

input[type=radio]:checked + label::after {
  left: 0.67rem;
  top: 0.35rem;
  border: 0.25rem solid black;
}

input[type=radio]:focus + label::before {
  outline: 0.2rem solid;
  outline-offset: 0.2rem;
}

Démonstration

La notice d’accessibilité des principaux composants d’interface riche AcceDe Web est-elle votre livre de chevet ?

Oui (recommandé)
Non

2 commentaires

Par Gaëtan, le 1 décembre 2017 à 16h37.

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

Bonjour,

Il y a une erreur dans l’exemple du socle HTML : la balise </legend> est en trop à l’avant-dernière ligne (la balise est déjà fermée plus haut)

:-)

Répondre
- Par Johan Ramon, le 1 décembre 2017 à 16h44.
  
  Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour,
  
  C’est corrigé.
  
  Merci pour votre vigilance. :)
  
  Johan
  
  Répondre

Ajouter un commentaire

Haut de page