Comment faire des cases à cocher HTML en images ?
Bonjour, je cherche à utiliser des images cen tant que cases à cocher HTML, c'est à dire afficher plusieurs images sur lesquelles il faut cliquer pour les sélectionner.
Que vous utilisiez des cases à cocher du type radio ou checkbox, vous pouvez utiliser l'élément HTML <label>, et un peu de code CSS, pour ne pas afficher les cases à cocher <input>, et les représenter sous la forme d'images cliquables.
Pour cela on intègre la case à cocher et l'image dans la balise <label></label>. On identifie par ailleurs les cases à cocher <input> via la propriété name="cases" .
<label>
<input type="radio" name="cases" value="0">
<img src="http://placehold.it/100x100" alt="">
</label>
Ensuite on crée trois règles CSS. La première rend les balises <input> non visibles :
input[name="cases"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
La seconde permet d'afficher un pointeur du type lien lorsqu'on survole une image :
input[name="cases"] + img {
cursor: pointer;
}
La troisième colorise les contours de l'image sur laquelle on a cliqué pour la mettre en exergue :
input[name="cases"]:checked + img {
outline: 4px solid #F79517;
}
Voici le code complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Comment créer des cases à cocher HTML sous forme d'images ?</title>
<style>
input[name="cases"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
input[name="cases"] + img {
cursor: pointer;
}
input[name="cases"]:checked + img {
outline: 4px solid #F79517;
}
</style>
</head>
<body>
<label>
<input type="radio" name="cases" value="0">
<img src="http://placehold.it/100x100" alt="">
</label>
<label>
<input type="radio" name="cases" value="1">
<img src="http://placehold.it/100x100" alt="">
</label>
<label>
<input type="radio" name="cases" value="2">
<img src="http://placehold.it/100x100" alt="">
</label>
</body>
</html>
Vous trouverez une démonstration dans le Bac à codes.