How to make default style work when checking validation?

Question

input {
  background: white;
  color: white;
}
input:in-range {
  background: green;
  color: white;
}
input:out-of-range {
  background: red;
  color: white;
}

<h3> CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100">

Aim:

white for out-of-range (default case)
green for in-range
red for out-of-range

In the above snippet, how can one make

input {
   background: white;
   color: white;
}

work for just input regardless of in-range or out-of-range?

You are allready define min or max if you used to this than used to jquery or javascript code — Rohit Azad Malik, Jan 05 '16 at 08:11
@ChoncholMahmud `in-range` and `out-of-range` are not working — xameeramir, Jan 05 '16 at 08:16
Its because of the `!important`. Try to avoid using `!important` at all costs. — William Callahan, Jan 05 '16 at 08:19
@student: This seems a bit like the `:valid`/`:invalid` pseudo where the values are considered as either `:in-range` or `:out-of-range` and so the default selector is always overriden by the pseudo-classes. [The spec says nothing about this](https://drafts.csswg.org/selectors-4/#range-pseudos). — Harry, Jan 05 '16 at 08:28
I think, Its impossible if you do not use `in-range` with `background:white;color:white;` instead of use `background:green;color:white;` because you already set `min` `range` so when you `input` anything then it is default state and also `in-range` state.So you should use `in-range` for get this result. — Chonchol Mahmud, Jan 05 '16 at 08:29
@student: Probably try giving the field a default value (like `value="0"`) and avoid the white background thing. Or, if the field is a mandatory field then there is another choice. Tell me, if it is one and I'll give that solution as answer. — Harry, Jan 05 '16 at 08:31
@Harry value="0" makes the field `red`. This will certainly deteriorate UX. This field is mandatory — xameeramir, Jan 05 '16 at 08:35

Harry · Accepted Answer · 2016-01-05T08:50:36.903

It seems like the :in-range and :out-of-range pseudo-classes work similar to the :valid and the :invalid pseudo-selectors. When this is applied, the input always seems to be in of the two states and because of it the default selector never gets applied. A blank value is also getting treated as in the range (though it shouldn't be). The selectors spec doesn't seem to mention a handling for this case.

Ideally, I would recommend adding a default value for the field (like value="0") because it is anyway a mandatory field for you. But, if you feel that the default red background affects your UX in a bad way then have a look at the below workaround.

Adding required attribute to the input (because it is anyway mandatory) and using it along with the :valid and :invalid pseudo-selectors seem to produce the required output.

input:invalid - Applied for default scenario or blank value because field is required and so a blank value means invalid.
input:in-range:valid - Any value that is in range and is valid would meet this selector.
input:out-of-range:invalid - Any value that is out of range and invalid only because it is out of range will match this selector and so red color would come only when the value is out of range.

Note to future readers: This is also not very correct because if I am a user, I would expect a blank value for a required field also to be invalid and have a red background. So, this may not be a suitable workaround for you. Please validate and use accordingly.

input:invalid {
  background: white;
  color: white;
}
input:in-range:valid {
  background: green;
  color: white;
}
input:out-of-range:invalid {
  background: red;
  color: white;
}

<h3> CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100" required>

score 1 · Answer 2 · edited May 23 '17 at 10:28

CSS cannot check whether or not a text box is empty under the conditions you are looking for. Below is a better approach to the solution, however your solution will require JavaScript. Please see this thread.

Try adding a class where the styles are only applied if the classes are on the element.

CSS

input[type="number"] {
    background: white;
    color: black;
}
input[type="number"].validate:in-range {
    background: green;
    color: white;
}
input[type="number"].validate:out-of-range {
    background: red;
    color: white;
}

HTML

<h3> CSS range validation </h3>
Enter your age
<input class="validate" type="number" min="1" max="100">

<h3> NO CSS range validation </h3>
Enter your age
<input type="number" min="1" max="100">

It's not becoming green for `in-range` and becoming red for `out-of-range` — xameeramir, Jan 05 '16 at 08:23

How to make default style work when checking validation?

Aim:

2 Answers2