Remplacer les cases à cocher du HTML par des images

Les cases à cocher natives du HTML ressemblent à quelque chose comme ça :

Les cases à cocher sont affichées de façon différentes selon les navigateurs. De plus, elles ne sont pas forcément assorties avec la charte graphique de tous les sites. C'est pourquoi, il peut parfois être utile de remplacer les cases à cocher par des images personalisées.

Voici le résultat escompté :

Les images

Bien sûr, il nous faudra des images pour remplacer les cases à cocher. J'ai sélectionné les images suivantes de l'incroable site d'icônes Friconix.

HTML

Le code HTML est assez simple, l'idée est d'afficher la case à cocher en HTML en plus des images. Le CSS fera le reste. Nous créons un container qui est le parent de la case à cocher et des images :

<label class="container">
    <input type="checkbox">
    <img class="img-unchecked"  src="https://lucidar.me/en/web-dev/files/unchecked.png" width="16px">
    <img class="img-checked"    src="https://lucidar.me/en/web-dev/files/checked.png"   width="16px">
    Text of the checkbox
</label>

Notons que les images ont des classes img-unchecked and img-checked). Ces attributs seront utilisés pour cacher/montrer les images selon le status de la case à cocher.

CSS

Container

Vous avez probablement remarqué qu'un curseur apparaît quand on clique sur le texte de la case à cocher. Pour éviter cela, ajoutons caret-color: transparent; au container principal. Vous pouvez aussi changer le curseur de la souris avec cursor: pointer;. Pour conserver le même comportement que les case à cocher du HTML, nous ajoutons aussi display: block; pour éviter que les cases à cocher ne soient sur la même ligne :

.container {
    cursor: pointer;
    caret-color: transparent;
    display: block;
}

Cacher la case du HTML

Commençons par cacher la case à cocher native du HTML :

/* Hide the browser's default checkbox */
.container input {
  display: none;
}

La case à cocher n'est plus affichée :

Cacher la case cochée

Maintenant, cachons l'image de la case qui est cochée :

/* Hide the checked checkbox */
.img-checked {
    display: none;
}

On cache celle qui est cochée, car la valeur par défaut d'une case à cocher est décochée.

Permuter les images

Voici le comportement du CSS pour permutter les images :

/* If checked, show the checked image */
.container input:checked ~ .img-checked {
    display: inline;
}

/* If checked, hide the unchecked image */
.container input:checked ~ .img-unchecked {
    display: none;
}

C'est aussi simple que ça :

Améliorations

Il est possible d'ajouter une troisième image qui s'affichera quand la souris passera sur l'élement. Pour ce faire, ajouter la troisième image dans le HTML, et adaptez le code suivant selon vos besoins :

.container:hover input:not(:checked) ~ .img-hover {
    display: inline;
}

.container:hover input:not(:checked) ~ .img-checked {
    display: none;
}

.container:hover input:not(:checked) ~ .img-unchecked {
    display: none;
}

Voici le résultat :

Voir aussi

Dernière mise à jour : 02/10/2022