:checked es una pseudo-clase que representa cuando un input tipo radio o checkbox está marcado o seleccionado por el usuario, es decir cuando entra en el estado activo (checked).
input[type="radio"]:checked + label {
color: tomato;
}
Esto cambia dependiendo la acción del usuario, aunque igual podría aplicar con JavaScript o si el estado por default del input es checked.
Uso
El uso es muy simple, consta de verificar desde CSS si el estado es seleccionado o no.Y a partir de eso aplicar los estilos correspondientes. Algo así como una condicional if.
<div class="input-wrapper">
<input type="radio" name="" id="radio">
<label for="radio">Radio input</label>
</div>
<div class="input-wrapper">
<input type="checkbox" name="" id="checkbox">
<label for="checkbox">Checkbox input</label>
</div>
.input-wrapper {
margin-right: 1rem;
}
input {
margin-right: 0.2rem;
}
input:checked + label {
font-size: 1.2rem;
font-weight: 700;
color: tomato;
}
Radio input
Checkbox input
Esto es un simple ejemplo de como usar :checked, pero, no es todo, gracias a que se está verificando el estado de los inputs, se puede ir aún más allá, con algunos "Hacks" conectado <label> con radio u checkbox.
<div class="input-wrapper">
<input type="radio" name="radio-input" id="radio-01">
<label for="radio-01">Radio 01</label>
</div>
<div class="input-wrapper">
<input type="radio" name="radio-input" id="radio-02">
<label for="radio-02">Radio 02</label>
</div>
<div class="input-wrapper">
<input type="radio" name="radio-input" id="radio-03">
<label for="radio-03">Radio 03</label>
</div>
input {
display: none;
}
label {
cursor: pointer;
border: 1px solid black;
padding: 0.5rem 1rem;
font-weight: 700;
text-transform: uppercase;
transition: 0.3s;
}
input:checked + label {
background: tomato;
color: white;
}
Radio 01
Radio 02
Radio 03