CSS :valid 選擇器

admin發表於2019-03-30
CSS

此選擇器可以匹配HTML5表單驗證通過的元素。

通過此選擇器可以給表單驗證通過的元素以特別的樣式設定。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:valid { Rules }

瀏覽器支援：

（1）.IE9+瀏覽器支援此選擇器。

（2）.edge瀏覽器支援此選擇器。

（3）.谷歌瀏覽器支援此選擇器。

（4）.火狐瀏覽器支援此選擇器。

（5）.opera瀏覽器支援此選擇器。

（6）.safria瀏覽器支援此選擇器。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{margin:20px;}  
input[type=text]:valid {
  background-color:green;
} 
</style>  
</head>
<body>
<form action="#" method="post">
  <input type="text" id="num" pattern="^\d{3,8}$" required>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

當在文字框中輸入的內容符合驗證規則時，背景顏色變為綠色。

相關文章