W3cubDocs

/CSS

:out-of-range

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

/* Selects any <input>, but only when it has a range
   specified, and its value is outside that range */
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}

This pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.

Note: This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

Syntax

:out-of-range

Example

HTML

<form action="" id="form1">
  <ul>Values between 1 and 10 are valid.
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>

CSS

li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: 'okay.';
}

input:out-of-range + label::after {
  content: 'out of range!';
}

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':out-of-range' in that specification.
Living Standard Defines when :out-of-range matches elements in HTML.
Selectors Level 4
The definition of ':out-of-range' in that specification.
Working Draft Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 10 Yes 29 No 11 Yes
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 2.3 ? Yes 16 Yes Yes ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range