Как изменить цвет фона полей ввода типа текста при вводе недопустимых значений?

Question

Как изменить цвет фона полей ввода с помощью CSS полей с типом текста, когда пользователь вводит недопустимые значения?

Answer 1

Вот пример для проверки по электронной почте:

HTML

<input type="email" required/> 

CSS

input:invalid { 
    background-color: #FFAAAA; 
} 

input:valid { 
    background-color: #AAFFAA; 
} 

Вы можете использовать простой HTML, чтобы проверить все эти типы данных:

тел, адрес, адрес электронной почты, дата и время, дата, месяц, неделя, время, дата и время-местная, номер, диапазон, цвет

Example Fiddle

Answer 2

Просто используйте :invalid псевдо-класс:

input {background:#9F9;} 
input:invalid {background:#F99;} 

Этот код выдвигает на первый план недействительных входов красных, и действительные входы зеленый.

Demo. Просто введите любое не число в любом из этих входов, и вы увидите, что оно изменилось на красный, а не зеленый. Это не будет работать для старых браузеров, которые либо don't support input type="number", либо css3 selectors.