0

estoy intentando cambiar de color un label si se selecciona si input tipo radio, pero no lo he logrado, solo he podido hacer que cuando pase el mouse por encima cambie de color pero no que se mantenga.

Codigo en CSS aca esta el estiloq e coloque en las tarjetas, fondo naranja, y el estilo de hover para cuando paso el mouse por encima

    width: 250px;
    height: 100px;
    background-color: #F5E8E4;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px;
    border: 3px solid #D1512D;
    border-radius: 20px;
    display: flex;
    color: #D1512D;
    justify-content: center;
    flex-direction: row-reverse;
}
.tarjeta-de-pet{
    width: 250px;
    height: 100px;
    background-color: #D1512D;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px;
    border: 3px solid #F5E8E4;
    border-radius: 20px;
    display: flex;
    color: #F5E8E4;
    justify-content: center;
    flex-direction: row-reverse;

Codigo en HTML aca esta como se definieron los label e input

                <label class="tarjeta-de-pet" for="firefox">
                    <p>Firefox 🔥</p>
                    <img src="./assets/dangerpets_pet_firefox.png" alt="Firefox 🔥">
                </label>
                <input class="input-de-pet" type="radio" name="pets" id="firefox"/>
                <label class="tarjeta-de-pet" for="trebolclan">
                    <p>Trebolclan ☘️</p>
                    <img src="./assets/dangerpets_pet_trebolclan.png" alt="Trebolclan ☘️">
                </label>
                <input class="input-de-pet" type="radio" name="pets" id="trebolclan"/>
                <label class="tarjeta-de-pet" for="watermelon">
                    <p>Watermelon 💧</p>
                    <img src="./assets/dangerpets_pet_watermelon.png" alt="Watermelon 💧">
                </label>
                <input class="input-de-pet" type="radio" name="pets" id="watermelon"/>
                <label class="tarjeta-de-pet" for="antpet">
                    <p>Antpet 💧🔥</p>
                    <img src="./assets/dangerpets_pet_antman.png" alt="Antpet 💧🔥">
                </label>
                <input class="input-de-pet" type="radio" name="pets" id="antpet"/>
                <label class="tarjeta-de-pet" for="spiderpet">
                    <p>Spiderpet 🔥☘️</p>
                    <img src="./assets/dangerpets_pet_spiderpet.png" alt="Spiderpet 🔥☘️">
                </label>
                <input class="input-de-pet" type="radio" name="pets" id="spiderpet"/>
                <label class="tarjeta-de-pet" for="thorpet">
                    <p>Thorpet ☘️💧</p>
                    <img src="./assets/dangerpets_pet_thropet.png" alt="Thorpet ☘️💧">
                </label>
                <input class="input-de-pet" type="radio" name="pets" id="thorpet"/>
            </div>

El problema es que cuando le doy click al label este no conserva el color blanco y vuelve a quedar naranjado

botones label

Cambio de color cuando paso el mouse encima

3
  • Puedes colocar todo tus estilos por favor para poder ayudarte mejor el 24 ago. 2022 a las 16:01
  • 2
    El hover sólo te cambia el color cuando pasas por encima, no de forma permanente. ¿Usas Javascript en algún momento? el 24 ago. 2022 a las 17:29
  • Falta código por ahí. Pégalo todo!
    – David
    el 24 ago. 2022 a las 19:28

2 respuestas 2

1

Si lo que quieres es que el elemento se quede con el :hover activo debes utilizar otra instrucción de CSS llamada :focus de este modo cuando el usuario haga click el estilo seguirá activo en el elemento.

.tarjeta-de-pet:focus {
  /* tus estilos del hover aquí tambien*/
}

Te dejo una referencia con más información: https://developer.mozilla.org/es/docs/Web/CSS/:focus

1

Cuando trates de hacer interfases interactivas lo mejor y más sencillo es hacerlo mediante javascript:

<button onclick="cambiaColor()">Click</button>

<script>
function cambiaColor() {
  document.getElementById("labelColor").style.backgroundcolor = "red";
}
</script>

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.