The :checked pseudo-class represents elements (checkbox and radio) that are in an selected (checked) state.
Example – css :checked checkbox element
This example highlights span next to a checked checkbox.
<style type="text/css">
input[type=checkbox]:checked + span {
background-color: lightgreen;
}
</style>
<input name="cb1" type="checkbox" value="1" checked><span>val1</span><br><br>
<input name="cb2" type="checkbox" value="2"><span>val2</span>
Example – css :checked radio button
This example highlights span next to a checked radio button.
<style type="text/css">
input[type=radio]:checked + span {
background-color: lightgreen;
}
</style>
<input name="rb1" type="radio" value="1" checked><span>val1</span><br><br>
<input name="rb1" type="radio" value="2"><span>val2</span>
