Con i CSS possiamo selezionare il testo adiacente ad una checkbox.
Partiamo dalla seguente marcatura:
<form action="" method="get">
<div>
<input type="checkbox" class="checkbox" name="test" value="1">
<span>Checkbox checked!</span>
</div>
</form>
Con i CSS possiamo sfruttare la pseudo-classe :checked che seleziona una checkbox quando viene attivata.
.checkbox {
margin-right: 4px;
}
.checkbox + span {
transition: background-color 400ms ease-in;
}
.checkbox:checked + span {
background-color: #ffaa57;
}