CSS: selezionare il testo adiacente ad una checkbox

Short link

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;
}

Demo

CSS: highlight the text near a checkbox

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.