Solución semántica pura de HTML / CSS
Esto es fácil de implementar por su cuenta, no se necesita una solución prefabricada. También te enseñará mucho, ya que no pareces demasiado fácil con CSS.
Esto es lo que necesitas hacer:
Sus casillas de verificación deben tener idatributos distintos . Esto le permite conectar un <label>a, utilizando el foratributo de la etiqueta .
Ejemplo:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Al adjuntar la etiqueta a la casilla de verificación, se activará el comportamiento del navegador: cada vez que alguien haga clic en la etiqueta (o en la imagen que contiene), se activará la casilla de verificación.
A continuación, oculta la casilla de verificación aplicándola, por ejemplo display: none;.
Ahora todo lo que queda por hacer es establecer el estilo que desea para su label::beforepseudo elemento (que se utilizará como elementos de reemplazo de la casilla de verificación visual):
label::before {
background-image: url(../path/to/unchecked.png);
}
En un último paso complicado, utiliza el :checkedpseudo selector de CSS para cambiar la imagen cuando la casilla de verificación está marcada:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
El +( selector de hermanos adyacentes ) se asegura de que solo cambie las etiquetas que siguen directamente a la casilla de verificación oculta en el marcado.
Puede optimizar eso colocando ambas imágenes en un mapa de sprites y solo aplicando un cambio en background-positionlugar de intercambiar la imagen.
Por supuesto, debe colocar la etiqueta correctamente y aplicar display: block;y configurar correctamente widthy height.
Editar:
El ejemplo y el fragmento de código, que creé después de estas instrucciones, usan la misma técnica, pero en lugar de usar imágenes para las casillas de verificación, los reemplazos de las casillas de verificación se realizan únicamente con CSS , creando una ::beforeetiqueta que, una vez marcada, tiene content: "✓";. Agregue algunos bordes redondeados y transiciones dulces y el resultado es realmente agradable.
Aquí hay un código abierto que muestra la técnica y no requiere imágenes para la casilla de verificación:
http://codepen.io/anon/pen/wadwpx
Aquí está el mismo código en un fragmento:
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>
