Boutons radio personnalisés en CSS

Sommaire

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>
  <ul>
    <li>
      <input type="radio" id="reponse-1" name="question" value="reponse-1" />
      <label for="reponse-1">Réponse 1</label>
    </li>
    <li>
      <input type="radio" id="reponse-2" name="question" value="reponse-2" />
      <label for="reponse-2">Réponse 2</label>
    </li>
    [...]
  </ul>
</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.7rem;
  top: 0.4rem;
  border: 0.25rem solid black;
}

input[type=radio]:focus + label::before {
  outline: 0.05rem dotted;
}

Démonstration

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

2 commentaires

  • Par Gaëtan, le 1 décembre 2017 à 16:37.

    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 à 16:44.

      Bonjour,

      C’est corrigé.

      Merci pour votre vigilance. :)

      Johan

      Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page