Lista checkbox con opciones seleccionadas y otras no

[ceaped]

Buenos días
Tengo esta lista:

Código HTML:

<div class="checkbox_list">
<p>Opción 1</p>
<input type="checkbox" name="" />
<label for="checkbox_list"></label>
</div>
 
<div class="checkbox_list">
<p>Opción 2</p>
<input type="checkbox" name="" />
<label for="checkbox_list"></label>
</div>
 
<div class="checkbox_list">
<p>Opción 3</p>
<input type="checkbox" name="" />
<label for="checkbox_list"></label>
</div>
 

Y este es el CSS:

Código CSS:

.checkbox_list {
    width: 25px;
    margin: 5px 100px 20px 20px;
    position: relative;
    float: left;
}
 
.checkbox_list p {
    line-height: 26px;
    max-width: 100px;
    margin: 0;
    padding: 0 0 0 40px;
    float: left;
}
 
.checkbox_list label {
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #eee;
    border:1px solid #ddd;
}
 
.checkbox_list label:after {
    opacity: 0.8;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #039800;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}
 

¿Cómo hago para quitar la selección de la "Opción 3"?

Gracias por su ayuda

[Rafael]

No entendí nada. La selección se dá por si el usuario le ha hecho click a la casilla.


Tu Html no tiene sentido. El atributo FOR es para asignarse una sola vez, y debe de estar ligado a un ID.

<input id="Uno">
<label for="Uno">

<input id="Dos">
<label for="Dos">

[ceaped]

Hola Rafael
Es un texto plano .html y dentro del el va unas opciones checkBox ya seleccionadas. No es para un formulario. Y una de ellas debe ir sin selección.

¿Cómo hago para quitar esa selección?

Gracias por tu ayuda

[KATHYU]

Me mata la curiosidad como es que aparece el cheque en el label

No es invocado en ningún lado, aparece "mágicamente" con el content:''; si alguien es tan amable de sacarme de esa duda.

@ceaped: lo único que pude hace es otra clase y ahí si sale lo que to quieres, no se si en tu caso queres obsesionarte con hacerlo de una sola vez

Código HTML:

<div class="checkbox_list">
<p>Opción 1</p>
<input type="checkbox" name="" />
<label for="checkbox_list"></label>
</div>
 
<div class="checkbox_list">
<p>Opción 2</p>
<input type="checkbox" name="" />
<label for="checkbox_list"></label>
</div>
 
<div class="checkbox_list2">
<p>Opción 3</p>
<input type="checkbox" name="" />
<label for="checkbox_list"></label>
</div>
 

Código CSS:

.checkbox_list {
    width: 25px;
    margin: 5px 100px 20px 20px;
    position: relative;
    float: left;
}
.checkbox_list2 {
    width: 25px;
    margin: 5px 100px 20px 20px;
    position: relative;
    float: left;
}
 
.checkbox_list p {
    line-height: 26px;
    max-width: 100px;
    margin: 0;
    padding: 0 0 0 40px;
    float: left;
}
.checkbox_list2 p {
    line-height: 26px;
    max-width: 100px;
    margin: 0;
    padding: 0 0 0 40px;
    float: left;
}
 
.checkbox_list label {
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #eee;
    border:1px solid #ddd;
}
.checkbox_list2 label {
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #eee;
    border:1px solid #ddd;
}
 
.checkbox_list label:after {
    opacity: 0.8;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #039800;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}
.checkbox_list2 label:after {
    opacity: 0.8;
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #039800;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}
 

De funcionar funciona

[Ito79]

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:

.notchecked label:after {
    border: none;
}
 

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

Código HTML:

<div class="checkbox_list notchecked">
<p>Opción 3</p>
<input type="checkbox" name="" />
<label for="checkbox_list"></label>
</div>
 

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

Un saludo
// Ito

[KATHYU]

Iniciado por Ito79

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.

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

Un saludo
// Ito

Muy amable, de verdad que no vi eso