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

Form validity pseudo-classes

The :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.

Selectors

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:in-range
10
13
29
5.1
18
5
Other
css.selectors.invalid

`:invalid`
10
12
4
5
18
5
CSS selector
form

Applies to `<form>` elements
40
79
13
9
40
9
Other
css.selectors.optional

`:optional`
10
12
4
5
18
5
css.selectors.out-of-range

`:out-of-range`
10
13
29
5.1
18
5
css.selectors.required

`:required`
10
12
4
5
18
5
css.selectors.valid

`:valid`
10
12
4
5
18
5
CSS selector
form

Applies to `<form>` elements
40
79
13
9
40
9
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
  • Before Chrome 52, `:in-range` matched disabled and read-only inputs (see bug 41248615). In Chrome 52, it was changed to only match enabled read-write inputs.
Notes 1 item(s)
Implementation note
  • Before Firefox 50, `:in-range` matched disabled and read-only inputs (see bug 1264157). In Firefox 50, it was changed to only match enabled read-write inputs.
Notes 1 item(s)
Implementation note
  • In Safari, `:in-range` matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.
Notes 1 item(s)
Implementation note
  • Before Chrome Android 52, `:in-range` matched disabled and read-only inputs (see bug 41248615). In Chrome Android 52, it was changed to only match enabled read-write inputs.
Notes 1 item(s)
Implementation note
  • In Safari on iOS, `:in-range` matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.

Syntax

CSS 
input:valid { border-color: #22c55e; }
input:invalid { border-color: #ef4444; }
input:required { border-left: 3px solid #3b82f6; }
input:out-of-range { background: #fef2f2; }

Live demo

Enabled/disabled. Display

CSS Enabled/disabled. Display demo.

PreviewFullscreen

requiredfield

CSS requiredfield demo.

PreviewFullscreen

rangecheck

CSS rangecheck demo.

PreviewFullscreen

Use cases

  • Using Form validity pseudo-classes

    The :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links