Reine semantische HTML / CSS-Lösung
Dies ist einfach selbst zu implementieren, es ist keine vorgefertigte Lösung erforderlich. Außerdem wird es Ihnen viel beibringen, da Sie mit CSS nicht allzu einfach zu sein scheinen.
Folgendes müssen Sie tun:
Ihre Kontrollkästchen müssen unterschiedliche idAttribute haben. Auf diese Weise können Sie eine Verbindung <label>mit dem forAttribut des Labels herstellen.
Beispiel:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Das Anhängen des Etiketts an das Kontrollkästchen löst ein Browserverhalten aus: Immer wenn jemand auf das Etikett (oder das darin enthaltene Bild) klickt, wird das Kontrollkästchen umgeschaltet.
Als nächstes blenden Sie das Kontrollkästchen aus, indem Sie es beispielsweise anwenden display: none;.
Jetzt müssen Sie nur noch den gewünschten Stil für Ihr label::beforePseudoelement festlegen (das als visuelles Ersatzelement für das Kontrollkästchen verwendet wird):
label::before {
background-image: url(../path/to/unchecked.png);
}
In einem letzten kniffligen Schritt verwenden Sie den :checkedPseudo-Selektor von CSS, um das Bild zu ändern, wenn das Kontrollkästchen aktiviert ist:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
Die +( nebenstehende Geschwisterauswahl ) stellt sicher, dass Sie nur Beschriftungen ändern, die direkt auf das ausgeblendete Kontrollkästchen im Markup folgen.
Sie können dies optimieren, indem Sie beide Bilder in eine Spritemap einfügen und nur eine Änderung vornehmen, background-positionanstatt das Bild auszutauschen .
Natürlich müssen Sie das Etikett korrekt positionieren und anzuwenden display: block;und richtig eingestellt widthund height.
Bearbeiten:
Das Codepen-Beispiel und das Snippet, die ich nach diesen Anweisungen erstellt habe, verwenden dieselbe Technik, aber anstatt Bilder für die Kontrollkästchen zu verwenden, werden die Kontrollkästchen nur durch CSS ersetzt , wobei ::beforeauf dem Etikett ein erstellt wird, das nach dem Aktivieren vorhanden ist content: "✓";. Fügen Sie einige abgerundete Ränder und süße Übergänge hinzu und das Ergebnis ist wirklich sympathisch!
Hier ist ein funktionierender Codepen, der die Technik veranschaulicht und keine Bilder für das Kontrollkästchen benötigt:
http://codepen.io/anon/pen/wadwpx
Hier ist der gleiche Code in einem Snippet:
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>
