Web/CSS/ in-range

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.

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

This pseudo-class is useful for giving the user a visual indication that a field's current value is within 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

:in-range

Examples

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" required>
      <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

Note: An empty <input> does not count as out of range, and will not be selected using the :out-of-range pseudo-class selector. The :blank pseudo-class exists to select blank inputs, although at the time of writing this is experimental and not well-supported. You could also use the required attribute and the :invalid pseudo-class to provide more general logic and styling for making inputs mandatory (:invalid will style blank and out-of-range inputs).

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:in-range`	Chrome Full support 10 Notes' Full support 10 Notes' Notes' Before Chrome 52, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Chrome 52, it was changed to only match enabled read-write inputs.	Edge Full support 13	Firefox Full support 29 Notes' Full support 29 Notes' Notes' 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.	IE No support No	Opera Full support 11 Notes' Full support 11 Notes' Notes' Before Opera 39, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.	Safari Full support 5.1 Notes' Full support 5.1 Notes' Notes' In Safari, `:in-range` matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.	WebView Android Full support 2.3 Notes' Full support 2.3 Notes' Notes' Before version 52, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In version 52, it was changed to only match enabled read-write inputs.	Chrome Android Full support 18 Notes' Full support 18 Notes' Notes' Before Chrome 52, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Chrome 52, it was changed to only match enabled read-write inputs.	Firefox Android Full support 16	Opera Android Full support 11 Notes' Full support 11 Notes' Notes' Before Opera 39, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.	Safari iOS Full support 5 Notes' Full support 5 Notes' Notes' In Safari, `:in-range` matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.	Samsung Internet Android Full support 1.0 Notes' Full support 1.0 Notes' Notes' Before version 6.0, `:in-range` matched disabled and read-only inputs (see Chromium bug 602568). In version 6.0, it was changed to only match enabled read-write inputs.

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.