:checked CSS Pseudo Class

Description

The :checked pseudo-class applies to interface elements such as checkboxes, radio boxes, and option items when they are in the on position. Switching elements to this state occurs using the checked attribute of the <input> element or by the user.

Syntax

element:checked { … } 

Example

<p>Which operating systems have you used?</p> 
<p>
<input type="checkbox" id="a1"><label for="a1">Windows 10</label><br>
<input type="checkbox" id="a2"><label for="a2">Windows 8</label><br>
<input type="checkbox" id="a3"><label for="a3">Windows Vista</label><br>
<input type="checkbox" id="a4"><label for="a4">Windows XP</label><br>
<input type="checkbox" id="a5"><label for="a5">Linux</label><br>
<input type="checkbox" id="a6"><label for="a6">Mac OS</label>
</p>
<p><input type="submit" value="Submit"></p>
input:checked + label { 
background: yellow;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
9121193.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
218410.121.0

Last updated by CSSPortal on: 25th November 2019