Cases à cocher simulées en CSS

Sommaire

Principe

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

Les cases à cocher sont dites « simulé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 simulé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 simuler 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>
  </legend>
</fieldset>

Socle CSS


input[type="checkbox"] {
  position: absolute;
  z-index: 100;
}

input[type="checkbox"]:focus + label {
  outline: 1px dotted;
}

input[type="checkbox"] + label::before {
  position: relative;
  z-index: 200;
  content: url('checkbox.png');
}

input[type="checkbox"]:checked + label::before {
  content: url('checkbox-checked.png');
} 

Sur la base de ce socle CSS, les images d’arrière-plan sont ensuite à positionner correctement par-dessus les cases à cocher. Par exemple à l’aide du code suivant :


input[type="checkbox"] + label::before {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
} 

Démonstration

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

Composants

Les composants ci-après sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements, variables en fonction de la version utilisée.

  1. Des cases à cocher au design personnalisé et accessibles.
  2. Accessible custom checkboxes and radio buttons.
  3. WTF, forms?.

Commentaires

Ajouter un commentaire

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

Haut de page