CSS Reference Manual

CSS @rules

Complete list of CSS attributes

CSS Functions (Functions)Comprehensive Handbook of CSS Selectors

CSS :in-range Selector

in-The range CSS pseudo-class represents an input element whose current value is within the range specified by the min and max attributes. Note: This pseudo-class is only applicable to elements that have (or can accept) a value range setting. If such a setting is missing, the element value is irrelevant to 'in-range” and “out-range”.

Complete CSS Selector Reference Manual

Online Example

Set the specified style when the input value is within the specified range:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>/title>　
<style>
input:in-range
{
　　　　border:2px solid orange;
}
</<style>
</<head>
<body>
<h3>:in-range Selector Example Demonstrates.</h3>
<input type="number" min="8" max="18" value="9"　/>
<p>Enter a value in the input (less than　8　Or greater than　18), view the changes in style.</p>
</body>
</html>

Test to see ‹/›

Definition and Usage

:in-The range selector is used to define the style displayed when the value of the label is within the specified interval value.

Note: 　:in-The range selector only acts on elements that can specify interval values, such as the min and max attributes in the input element.

Browser Compatibility

The numbers in the table indicate the first browser version number that supports this attribute.

Selector
:in-range	10.0	Not Supported	28.0	5.2	11.0

CSS Syntax

/*　This pseudo-class can select any <input>, but it is only effective when the element specifies a value range and the element value is within the specified range.*/
input:in-range {
　　background-color: rgba(0,　255, 0, 0.25);
}

This pseudo-class is used to provide a visual cue to the user indicating that the current value of the input field is within the allowed range.

CSS Selector :out-of-range