Widely availableSupported across all major browsers. Safe to use in production.
Interaction Widely available

Input selectors

The :checked, :disabled, and :enabled CSS pseudo-classes match form elements based on their state.

Interaction

Overview

The :checked, :disabled, and :enabled CSS pseudo-classes match form elements based on their state.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:checked
1
12
1
3.1
18
2
Other
css.selectors.disabled

`:disabled`
1
12
1
3.1
18
2
css.selectors.enabled

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

:checked

CSS:checked demo.

PreviewFullscreen

:disabled

CSS:disabled demo.

PreviewFullscreen

:focus-within

CSS:focus-within demo.

PreviewFullscreen

Use cases

  • Using Input selectors

    The :checked, :disabled, and :enabled CSS pseudo-classes match form elements based on their state.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features