What's the difference between :out-of-range and :invalid?

Question

Example

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

<input c type="number" min="1" max="100">

What's the difference between :out-of-range and :invalid?

Answer 1

The :out-of-range selector selects elements that have a value that is outside the set min and max values of the input

<input type="number" min="5" max="10" value="17"> <!-- Gets selected with :out-of-range -->
<input type="number" min="5" max="10" value="8"> <!-- Does not get selected with :out-of-range -->

The :invalid selector selects elements that are invalid according to what type the input is.

<input type="email" value="[email protected]"> <!-- Is a valid e-mail address and does not get selected with :invalid -->
<input type="email" value="foo"> <!-- Is not a valid e-mail address and gets selected with :invalid -->

JSFiddle

Answer 2

It's simple, but remember that some browsers does not support these features.

:out-of-range

<input type="date" name="dateCheck" min="2000-01-01" max="2016-07-06">
<!-- in this case if you enter date after 2016-07-06 input:out-of-range will match -->

The :out-of-range selector selects all elements with a value that is outside a specified range.

Note: The :out-of-range selector only works for elements with range limitations, such as input elements with min and max attributes.

Tip: Use the :in-range selector to select all elements with a value that is within a specified range.

source: http://www.w3schools.com/cssref/sel_out-of-range.asp

:in-range is also reversed version of :out-of-range

:invalid

<input type="date" name="dateCheckInvalid" min="2016-07-06">
<!-- in this case if u enter date before 2016-07-06 input:invalid will match -->

The :invalid selector selects form elements with a value that does not validate according to the element's settings.

Note: The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.

Tip: Use the :valid selector to select form elements with a value that validates according to the element's settings.

source: http://www.w3schools.com/cssref/sel_invalid.asp

See simple demo: https://jsfiddle.net/bytdubk4/

Answer 3

The out-of-range selector applies the specified style only if the value of the input element is "out of range". The out-of-range selector only works for elements with range limitations, such as input elements with min and max attributes.

Eg: Max number of characters that could be entered into an input field is 50. But when the user tries entering more than that, the input field can change color depending on the style specified here(like a red highlight or so).

The invalid selector applies the specified style only if the value of the input element is "invalid". This only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc. So when the input value entered by the user is rendered to be false or invalid the specified style is applied to the input field.

Eg: When an input email is detected as invalid, the input field can be disabled while a notification/instruction is being displayed to the user.