Use imágenes como casillas de verificación {DH}

Esto es fácil de implementar usted mismo, no es necesaria una solución lista para usar. También te enseñará mucho, ya que no parece tan fácil con CSS.

Lo que tienes que hacer:

Tus casillas de verificación deben ser diferentes id Atributos. Puedes usarlo para establecer una conexión. <label> a ella, con el dia for-Atributo.

Ejemplo:

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="https://someurl" /></label>

Adjuntar la etiqueta a la casilla de verificación activa el comportamiento del navegador: cada vez que alguien hace clic en la etiqueta (o en la imagen que contiene), la casilla de verificación se activa.

Luego, oculte la casilla de verificación, por ejemplo display: none; eso.

Ahora todo lo que tiene que hacer es elegir el estilo que desee para su label::before pseudo elemento (para ser utilizado como elementos de anulación de casilla de verificación visual):

label::before {
    background-image: url(../path/to/unchecked.png);
}

En un último paso complicado, use CSS ‘ :checked Pseudo-selector para cambiar la imagen si la casilla de verificación …

Seguir leyendo:
Use imágenes como casillas de verificación {DH}

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *