Pura soluzione semantica HTML / CSS
È facile da implementare da solo, non è necessaria alcuna soluzione prefabbricata. Inoltre ti insegnerà molto in quanto non sembri troppo facile con i CSS.
Questo è quello che hai bisogno di fare:
Le tue caselle di controllo devono avere idattributi distinti . Ciò ti consente di collegarti <label>a, usando l' forattributo- label dell'etichetta.
Esempio:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Il collegamento dell'etichetta alla casella di controllo attiverà un comportamento del browser: ogni volta che qualcuno fa clic sull'etichetta (o sull'immagine al suo interno), la casella di controllo verrà attivata.
Successivamente, nascondi la casella di controllo applicando ad esempio display: none;ad essa.
Ora non resta che impostare lo stile desiderato per il tuo label::beforepseudo elemento (che verrà utilizzato come elementi di sostituzione della casella di controllo visiva):
label::before {
background-image: url(../path/to/unchecked.png);
}
In un ultimo passaggio complicato, fai uso dello :checkedpseudo-selettore CSS per cambiare l'immagine quando la casella è selezionata:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
Il +( selettore di fratello adiacente ) si assicura di cambiare solo le etichette che seguono direttamente la casella di controllo nascosta nel markup.
Puoi ottimizzarlo inserendo entrambe le immagini in una mappa sprit e applicando solo una modifica background-positioninvece di scambiare l'immagine.
Naturalmente è necessario posizionare correttamente l'etichetta, applicare display: block;e impostare correttamente widthe height.
Modificare:
L'esempio e lo snippet di codepen, che ho creato dopo queste istruzioni, utilizzano la stessa tecnica, ma invece di utilizzare le immagini per le caselle di controllo, le sostituzioni delle caselle di controllo vengono eseguite esclusivamente con CSS , creando un ::beforesull'etichetta che, una volta selezionata, ha content: "✓";. Aggiungi alcuni bordi arrotondati e dolci transizioni e il risultato è davvero piacevole!
Ecco un codice funzionante che mostra la tecnica e non richiede immagini per la casella di controllo:
http://codepen.io/anon/pen/wadwpx
Ecco lo stesso codice in uno 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>
