Cases à cocher personnalisées en CSS

Sommaire

Principe

Les cases à cocher sont des éléments de formulaires qui permettent de sélectionner une ou plusieurs options parmi un groupe d’options proposées.

Les cases à cocher sont dites « personnalisées en CSS » lorsqu’elles sont construites sur la base du code HTML standard prévu pour ces éléments par la spécification : <input type="checkbox" />, mais que ces cases à cocher standards sont masquées à l’écran puis personnalisées 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 cases à cocher à 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="checkbox" id="reponse-1" name="reponse-1" />
      <label for="reponse-1">Réponse 1</label>
    </li>
    <li>
      <input type="checkbox" id="reponse-2" name="reponse-2" />
      <label for="reponse-2">Réponse 2</label>
    </li>
    [...]
  </ul>
</fieldset>

Socle CSS

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

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

input[type=checkbox] + label::before,
input[type=checkbox] + label::after {
  content: '';
  position: absolute;
  display: inline-block;
}

input[type=checkbox] + label::before {
  left: 0.5rem;
  top: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 0.05rem solid black;
  background: white;
}

input[type=checkbox]:checked + label::after {
  left: 0.55rem;
  top: 0.18rem;
  height: 0.8rem;
  border-left: 0.8rem solid black;
}

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

Démonstration

Quelle(s) notice(s) AcceDe Web connaissez-vous par cœur ?

Commentaires

Ajouter un commentaire

Tous les champs sont obligatoires.

Haut de page