Solution HTML / CSS sémantique pure
Ceci est facile à mettre en œuvre par vous-même, aucune solution prédéfinie n'est nécessaire. De plus, cela vous apprendra beaucoup car vous ne semblez pas trop facile avec CSS.
Voici ce que vous devez faire:
Vos cases à cocher doivent avoir des idattributs distincts . Cela vous permet d'y connecter un <label>, en utilisant l' forattribut de l' étiquette.
Exemple:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Le fait d'attacher l'étiquette à la case à cocher déclenchera un comportement du navigateur: chaque fois que quelqu'un cliquera sur l'étiquette (ou l'image à l'intérieur), la case à cocher sera activée.
Ensuite, vous masquez la case à cocher en y appliquant par exemple display: none;.
Il ne vous reste plus qu'à définir le style que vous souhaitez pour votre label::beforepseudo élément (qui sera utilisé comme élément de remplacement visuel de la case à cocher):
label::before {
background-image: url(../path/to/unchecked.png);
}
Dans une dernière étape délicate, vous utilisez le :checkedpseudo-sélecteur CSS pour changer l'image lorsque la case est cochée:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
Le +( sélecteur frère adjacent ) garantit que vous ne modifiez que les libellés qui suivent directement la case à cocher masquée dans le balisage.
Vous pouvez optimiser cela en plaçant les deux images dans un spritemap et en n'appliquant qu'une modification au background-positionlieu de permuter l'image.
Bien sûr, vous devez positionner correctement l'étiquette et appliquer display: block;et régler correctement widthet height.
Éditer:
L'exemple et l'extrait de code codepen, que j'ai créés après ces instructions, utilisent la même technique, mais au lieu d'utiliser des images pour les cases à cocher, les remplacements de cases à cocher se font uniquement avec CSS , créant un ::beforesur l'étiquette qui, une fois cochée, a content: "✓";. Ajoutez des bordures arrondies et des transitions douces et le résultat est vraiment sympathique!
Voici un codepen fonctionnel qui présente la technique et ne nécessite pas d'images pour la case à cocher:
http://codepen.io/anon/pen/wadwpx
Voici le même code dans un extrait de code:
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>
