CSS :checked Pseudo-class
Example
Style all checked <input> elements with a thin, red outline:
input:checked {
outline: 1px solid red;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS :checked pseudo-class
matches any <input> or <option> element that is checked.
This is for <input type="radio">, <input type="checkbox"> and <option> in a <select> element.
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-class.
| Pseudo-class | |||||
|---|---|---|---|---|---|
| :checked | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Syntax
More Examples
Example
Style radio buttons, checkboxes, and options with different styles when checked:
input[type="radio"]:checked {
box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
box-shadow: 0 0 5px 3px
maroon;
}
option:checked {
color: blue;
background-color: pink;
}
Try it Yourself »
