The pseudo-classes `:in-range` and `:out-of-range`.

:in-range

:out-of-range

Summary of characteristics of the `:in-range` selector

Status

Standard

W3C Module

Selectors

References (W3C)

Selectors Level 4

Document status: WD (Working Draft)

Description of the pseudo-classes `:in-range` and `:out-of-range`.

The pseudo-class :in-range targets elements (input fields) whose value is within the allowed range. Conversely, :out-of-range targets elements whose value is outside the allowed range.

The allowed range of values is defined by the min and max attributes of an input tag. Note: The value is checked when the form is submitted, so the form and /form tags need to be present. A submit button is also recommended to make it easier to trigger validation.

The example below is the minimal HTML code to get it working. On the right, you can see the basic functionality (without CSS styles) by entering out-of-range values and clicking the OK button.


	<form method="post" action="">
	   <input type="number" min="18" max="65">
	   <input type="submit" value="ok">
	</form>

The standard states that input fields without a min or max attribute shouldn't be targeted by either :in-range or :out-of-range. In practice, some browsers treat their value as always within the allowed range (since there are no limits set) and end up being targeted by :in-range.

Many types of input fields have the min and max attributes, but the user cannot enter a value outside these limits. This is the case for sliders (input type="range"), date input fields, and so on. For these elements, it's always the :in-range selector that remains active.

Examples of using `:in-range` and `:out-of-range`.

You’ll notice, with the example below, that the pseudo-classes :in-range and :out-of-range activate without needing to submit the form, or instance by clicking a submit button.

On the other hand, leaving it empty is considered correct, and activates :in-range.
(To make input mandatory, see the required attribute and the corresponding pseudo-class: :required ).

For the date, month, and week input field, you'll need to type in a date: the dropdown lists won't let you enter a value outside the allowed range.

Support for `:in-range` and `:out-of-range`.

The pseudo-classes :in-range and :out-of-range don't cause any compatibility issues with current browsers.

Column 1

Browser support for the pseudo-classes :in-range and :out-of-range which target input field contents that are within or outside the allowed ranges.

:in-range
:out-of-range
pseudo-class

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Chrome

Edge

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

History of pseudo-classes `:in-range` and `:out-of-range`.

Selectors Level 4

This specification module defines new selectors that can be used in CSS.

Regarding :in-range Introduction of the pseudo-class :in-range in this specification module.

September 29, 2011
Working Draft.