:in-range

The :in-range pseudo-class selects an element with a value in the specified range.

 

The :in-range pseudo-class is used to style an input element whose current value is within the range specified by the min and max attributes.

This pseudo-class helps provide the user with visual information that the field’s current value is within acceptable limits. Note: This pseudo-class applies only to items that can accept a range constraint.

Without such a constraint, the element cannot be “in range” or “out of range”.

Syntax

/* Selects any <input> element, but only when it has a range specified, and its value is inside that range */

input:in-range {
  background-color: green;
}

Example

    A value between 1 and 10 is valid.
CSSHTML
li {
    list-style: none;
    margin-bottom: 1em;
}

input {
    margin-top: 1rem;
    border: 1px solid black;
    width: 300px;
}

input:in-range {
    background-color: green;
}

input:out-of-range {
    background-color: red;
    border: 1px solid red;
}

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

input:out-of-range+label::after {
    content: 'out of range.';
}
<form action="" id="form1">
  <ul>
    A value between 1 and 10 is valid.
    <li>
      <input
        id="value"
        name="value"
        type="number"
        placeholder="1 to 10"
        min="1"
        max="10"
        value="11"
      />
      <label for="value">The value is </label>
    </li>
  </ul>
</form>