Solução HTML / CSS semântica pura
É fácil de implementar por conta própria, não é necessária uma solução pré-fabricada. Também lhe ensinará muito, pois você não parece muito fácil com CSS.
Isso é o que você precisa fazer:
Suas caixas de seleção precisam ter idatributos distintos . Isso permite conectar um <label>a ele, usando o foratributo- label .
Exemplo:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Anexar o rótulo à caixa de seleção acionará o comportamento do navegador: sempre que alguém clicar no rótulo (ou na imagem dentro dele), a caixa de seleção será alternada.
Em seguida, oculte a caixa de seleção aplicando, por exemplo, display: none;a ela.
Agora, basta definir o estilo desejado para o seu label::beforepseudo elemento (que será usado como elemento de substituição visual da caixa de seleção):
label::before {
background-image: url(../path/to/unchecked.png);
}
Em uma última etapa complicada, você usa o :checkedpseudo-seletor do CSS para alterar a imagem quando a caixa de seleção está marcada:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
O +( seletor de irmão adjacente ) garante que você altere apenas os rótulos que seguem diretamente a caixa de seleção oculta na marcação.
Você pode otimizar isso colocando as duas imagens em um spritemap e aplicando apenas uma alteração em background-positionvez de trocar a imagem.
Obviamente, você precisa posicionar o rótulo corretamente, aplicar display: block;e definir o correto widthe height.
Editar:
O exemplo e o snippet do codepen, que criei após essas instruções, usam a mesma técnica, mas , em vez de usar imagens para as caixas de seleção, as substituições das caixas de seleção são feitas exclusivamente com CSS , criando um ::beforeno rótulo que, uma vez marcado, possui content: "✓";. Adicione algumas bordas arredondadas e transições doces e o resultado é realmente agradável!
Aqui está um código de trabalho que mostra a técnica e não requer imagens para a caixa de seleção:
http://codepen.io/anon/pen/wadwpx
Aqui está o mesmo código em um trecho:
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>
