Пример
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">
В чем разница между :out-of-range и :invalid?
Селектор :out-of-range выбирает элементы, у которых есть значение, находящееся вне значений min и max ввода
<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 -->
Селектор :invalid выбирает элементы, которые являются недопустимыми в зависимости от типа ввода.
<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 -->
Это просто, но помните, что некоторые браузеры не поддерживают эти функции.
: вне диапазона
<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 -->
Селектор вне диапазона выбирает все элементы со значением, находящимся вне указанного диапазона.
Примечание. Селектор: вне диапазона работает только для элементов с ограничениями диапазона, такими как входные элементы с атрибутами min и max.
Совет. Используйте селектор: in-range для выбора всех элементов со значением, находящимся в пределах заданного диапазона.
источник: http://www.w3schools.com/cssref/sel_out-of-range.asp
: in-range также изменена версия : вне диапазона
: неверная
<input type="date" name="dateCheckInvalid" min="2016-07-06">
<!-- in this case if u enter date before 2016-07-06 input:invalid will match -->
Недействительный селектор выбирает элементы формы со значением, которое не проверяется в соответствии с настройками элемента.
Примечание. Недействительный селектор работает только для элементов формы с ограничениями, таких как элементы ввода с атрибутами min и max, поля электронной почты без юридического адреса электронной почты или числовые поля без числового значения и т.д.
Совет. Используйте селектор: valid для выбора элементов формы со значением, которое проверяется в соответствии с настройками элемента.
источник: http://www.w3schools.com/cssref/sel_invalid.asp
См. простую демонстрацию: https://jsfiddle.net/bytdubk4/
Селектор вне диапазона применяет указанный стиль только в том случае, если значение входного элемента "вне диапазона". Селектор вне диапазона работает только для элементов с ограничениями диапазона, такими как входные элементы с атрибутами min и max.
Например: Максимальное количество символов, которое может быть введено в поле ввода, равно 50. Но когда пользователь пытается ввести более того, поле ввода может изменять цвет в зависимости от стиля, указанного здесь (например, красная подсветка или так).
Недействительный селектор применяет указанный стиль только в том случае, если значение входного элемента недействительно. Это работает только для элементов формы с ограничениями, таких как элементы ввода с минимальными и максимальными атрибутами, поля электронной почты без юридического адреса электронной почты или числовые поля без числового значения и т.д. Поэтому, когда введенное пользователем значение вводится как ложное или недействительный указанный стиль применяется к полю ввода.
Например: Когда входной адрес электронной почты обнаружен как недействительный, поле ввода может быть отключено, пока пользователь/инструкция отображается пользователю.