0

No sé cómo dejar un label seleccionado: solo he podido marcarlo cuando paso el cursor sobre él, pero al darle clic no se queda seleccionado. ¿Cómo se puede hacer? Lo estoy intentando solo con CSS y HTML.

label {
    color: rgb(80, 153, 77);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: rgb(218, 218, 218); */
    box-sizing: border-box;
    border-radius: 20px;
    cursor: pointer;
}

label:hover{
    background-color: rgb(190, 190, 190);
    opacity: 0.6;
    box-shadow:  0 0 0 2px white, 0 0 0 4px blue;
}
<label for="Hipodoge" class="sombreado">Nombre</label>

1 respuesta 1

1

Con javascript podrías crear un estado, pero si dices solo con CSS+HTML la opción que se me ocurre es que usar un checkbox oculto, enlazarlo con el label mediante la propiedad for y si está "checkado" implementar el css.

label {
    color: rgb(80, 153, 77);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: rgb(218, 218, 218); */
    box-sizing: border-box;
    border-radius: 20px;
    cursor: pointer;
}

label:hover{
    background-color: rgb(190, 190, 190);
    opacity: 0.6;
    box-shadow:  0 0 0 2px white, 0 0 0 4px blue;
}

.nomostrar{
 display:none;
}

.chkconlabel[type="checkbox"]:checked + label{
    background-color: rgb(190, 190, 190);
    opacity: 0.6;
    box-shadow:  0 0 0 2px white, 0 0 0 4px blue;
}
<input type="checkbox" id="Hipodoge1" class="nomostrar chkconlabel">
<label for="Hipodoge1" class="sombreado">Nombre</label>

<input type="checkbox" id="Hipodoge2" class="nomostrar chkconlabel">
<label for="Hipodoge2" class="sombreado">Nombre</label>


<input type="checkbox" id="Hipodoge3" class="nomostrar chkconlabel">
<label for="Hipodoge3" class="sombreado">Nombre</label>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.