CSS allows us to select the text adjacent to a checkbox.

We have the following HTML structure.

<form action="" method="get">
        <input type="checkbox" class="checkbox" name="test" value="1">
        <span>Checkbox checked!</span>

We can use the :checked pseudo-class matching a checkbox when it's activated. Then we can select the next sibling element that contains our text.

.checkbox {
    margin-right: 4px;

.checkbox + span {
    transition: background-color 400ms ease-in;

.checkbox:checked + span {
    background-color: #ffaa57;

You can see the above code in action on the following page.