Какая разница между: вне диапазона и: недействительным?

Пример

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?

Ответы

Ответ 1

Селектор :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 -->

JSFiddle

Ответ 2

Это просто, но помните, что некоторые браузеры не поддерживают эти функции.

: вне диапазона

<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/

Ответ 3

Селектор вне диапазона применяет указанный стиль только в том случае, если значение входного элемента "вне диапазона". Селектор вне диапазона работает только для элементов с ограничениями диапазона, такими как входные элементы с атрибутами min и max.

Например: Максимальное количество символов, которое может быть введено в поле ввода, равно 50. Но когда пользователь пытается ввести более того, поле ввода может изменять цвет в зависимости от стиля, указанного здесь (например, красная подсветка или так).

Недействительный селектор применяет указанный стиль только в том случае, если значение входного элемента недействительно. Это работает только для элементов формы с ограничениями, таких как элементы ввода с минимальными и максимальными атрибутами, поля электронной почты без юридического адреса электронной почты или числовые поля без числового значения и т.д. Поэтому, когда введенное пользователем значение вводится как ложное или недействительный указанный стиль применяется к полю ввода.

Например: Когда входной адрес электронной почты обнаружен как недействительный, поле ввода может быть отключено, пока пользователь/инструкция отображается пользователю.