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