: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

HTML

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

CSS

input:checked + label { 

   background: yellow; 

}

Result

Browser Support

Desktop

9	12	1	1	9	3.1

Tablets / Mobile

2	18	4	10.1	2	1.0

Last updated by CSSPortal on: 25th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu