CSS :optional 選擇器

admin發表於2019-03-30
CSS

optional翻譯成漢語具有"可選"的意思。

名副其實，此選擇器可以匹配非必需表單元素。

所謂非必需表單元素，也就是不具有required屬性的表單元素。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:optional { 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:optional {
  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/211358s5s7027qz82fq4uq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

相關文章