Input selectors
The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select> element) that is checked or toggled to an on state.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3.1 | 18 | 2 | |
| Other | ||||||
| `:disabled` | 1 | 12 | 1 | 3.1 | 18 | 2 |
| `:enabled` | 1 | 12 | 1 | 3.1 | 18 | 2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- On macOS, styling `<option>` elements has no effect.
Notes 1 item(s)
Implementation note
- On macOS, styling `<option>` elements has no effect.
Notes 2 item(s)
Implementation note
- From Firefox 56, `<option>` elements cannot be styled.
- On macOS, styling `<option>` elements has no effect.
Notes 1 item(s)
Implementation note
- Styling `<option>` elements has no effect.
Notes 1 item(s)
Implementation note
- Styling `<option>` elements has no effect.
Notes 1 item(s)
Implementation note
- Before Edge 79, Edge did not recognize `:disabled` on the `<fieldset>` element.
Syntax
CSS
input:checked {
accent-color: blue;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}Live demo
Use cases
-
Using Input selectors
The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select> element) that is checked or toggled to an on state.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.