Ver Mensaje Individual
  #5 (permalink)  
Antiguo 26/03/2017, 11:57
Avatar de Ito79
Ito79
 
Fecha de Ingreso: diciembre-2013
Mensajes: 71
Antigüedad: 10 años, 4 meses
Puntos: 18
Respuesta: Lista checkbox con opciones seleccionadas y otras no

Hola,

Aparecen marcadas porque en el estilo ".checkbox_list label:after" juega con los bordes, le pone un borde cuadrado pero luego le quita el borde superior y el derecho de forma que el borde queda como una L, esa L la gira con el transform: rotate 45 grados y por tanto parece una V como si estuviera seleccionado.

Por tanto, para quitar esa selección (que no es selección de verdad, sólo un efecto visual) tienes que hacer un estilo nuevo para la opción 3 y quitarle ese juego de bordes.

Si fuera mi código y quisiera dejarlo limpio, lo que haría sería crear un estilo con las cosas comunes para todas las casillas, y luego uno para las seleccionadas y otro para las no seleccionadas. Pero entiendo que esto igual te puede complicar más tu desarrollo (depende a la altura que estés, del conocimiento que tengas y demás), así que otra solución mucho más sencilla sería añadir un estilo nuevo tal que:

Código CSS:
Ver original
  1. .notchecked label:after {
  2.     border: none;
  3. }

y en el div de la tercera casilla añades esa clase:

Código HTML:
Ver original
  1. <div class="checkbox_list notchecked">
  2. <p>Opción 3</p>
  3. <input type="checkbox" name="" />
  4. <label for="checkbox_list"></label>
  5. </div>

Espero que se entienda, cualquier cosa la preguntas por favor.

Un saludo
// Ito