Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:checked

[CSS Selector] E:checked

'selector:checked' applies styles to elements that are checked, and is commonly referred to as a 'state pseudo-class'. It does not work in IE8 and earlier.

Since it applies to checked elements, it is mainly used with '' (checkboxes) or '' (radio buttons).

Sample Code

style.css

/* style the adjacent element when checked */
input:checked + p { color: red;}

/* style a label when its checkbox is checked */
input[type="checkbox"]:checked + label { font-weight: bold; color: #27ae60;}

/* style a label when its radio button is selected */
input[type="radio"]:checked + label { color: #2980b9; text-decoration: underline;}

/* custom checkbox: change background when the option is selected */
input[type="checkbox"]:checked ~ .option-label { background-color: #dff0d8;}

Browser Preview

input:checked + p { color: red;} /* Makes the sibling p element red when checked. */

<input type="checkbox">
<p>Color changes when checked.</p>
<input type="radio">
<p>Color changes when checked.</p>

Browser Support

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

3.1+ ○

2 and earlier ×

Edge

12+ ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9+ ○

8 and earlier ×

Mobile

iOS Safari

2+ ○

1 and earlier ×

Android Browser

2+ ○

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN.

If you find any errors or copyright issues, please contact us.

Home