如何在輸入無效值時更改文本類型輸入字段的背景顏色？

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。