CSS :in-range

The :in-range CSS pseudo-class represents an element that is in range. It is typically applied to form elements such as input fields, checkboxes, radio buttons, and select menus that have a range or list of acceptable values.

When an element is in range, it means that the user input meets the criteria set by the min and max attributes defined in the HTML markup. The element is considered valid and will not trigger any validation error messages.

Syntax:

input:in-range {
  /* CSS styles */
}

Example:

In the example above, the input field for entering age has a min value of 18 and a max value of 100. This means that any value entered between 18 and 100 (inclusive) will be considered in range and will not trigger a validation error.

The :in-range pseudo-class can be styled using CSS properties such as color, background-color, border, etc. to visually indicate to the user that the input is valid.