CSS :in-range

The CSS :in-range pseudo-class is used when we need to apply the style to all those values that are within a specified range.

Note - The :in-range selector works with INPUT fields/elements having MIN and/or MAX attributes.

CSS :in-range Example

HTML with CSS Code
<!DOCTYPE html>
      input:in-range {color: teal; font-weight: bold;}

      Enter a Number: <input type="number" min="10" max="100">

Enter a Number:

Note - When user types a number within the specified range, that is from 10 to 100, then the value or number's color will be teal with bold value.

CSS Online Test

« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook

Subscribe Us on YouTube