CODEWITHSUNDEEP
htmlcssinputonfocus
Duan Jogun
Duan Jogun

Reputation: 11

HTML/CSS: Input number is in range by default

I have an input number tag, with a min value of 3 and max of 999. I want it to highlight with green if a number in range is entered, and to highlightwith red if a number out of range is entered.

The problem is that it is by default highlighted green. Why is it doing this and how do I make it so it only highlights green after a number in range is entered?

HTML:

<input type="number" placeholder="No#" min="3" max="999">

CSS:

    input:focus {
        border: 3px solid lightslategray;
    }

    input[type="number"]:not(:focus):out-of-range {
        border: 3px solid red;
    }

    input[type="number"]:not(:focus):in-range {
        border: 3px solid green;
    }

Upvotes: 1

Views: 692

Answers (2)

user16725791
user16725791

Reputation:

The problem is that browser see empty value and mark it as acceptable, i don't think u can do some thing with it in just html\css, because u need to validate empty value after focus out, but browser won't.

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 77045

The highlight only changes if you focus out from the input. Instead, you can remove the part that specifies that the green highlight should only occur when you focus out:

    input:focus {
        border: 3px solid lightslategray;
    }

    input[type="number"]:out-of-range {
        border: 3px solid red;
    }

    input[type="number"]:in-range {
        border: 3px solid green;
    }
<input type="number" placeholder="No#" min="3" max="999">

Upvotes: 0

Related Questions