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