CSS :required 選擇器

admin發表於2019-03-30
CSSUI

此選擇器可以匹配具有required屬性的表單元素。

也就是匹配具有必需屬性的表單元素，然後設定其樣式。

語法結構：

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

特別說明：E是一個選擇器，匹配的必須是表單元素。

瀏覽器支援：

（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:required{
  background-color: #ccc;
} 
</style>   
</head>
<body>
<form action="#" method="post">
  <input type="text" required><br/>
  <input type="text"><br/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

上述程式碼可以匹配具有required屬性的文字框，截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/30/210650n4upi77pgpah49mg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第一個文字框具有required屬性，所以它的背景顏色被設定為#ccc。

相關文章