CSS :checked – style for selected checkbox and radio

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>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments