CSS :read-only 選擇器

admin發表於2019-03-30
CSS

此選擇器可以匹配只讀表單元素，也就是具有readonly屬性的元素。

特別說明：此選擇器不僅適用於表單元素，也可以使用其他元素，以實測為準。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:read-only { 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:read-only {
  color:green;
} 
</style>   
</head>
<body>
<form action="#" method="post">
  <input type="text" value="螞蟻部落" readonly><br/>
  <input type="text" value="螞蟻部落"><br/>
  <input type="submit" id="bt" value="提交表單"/>
</form>
</body>
</html>

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

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

第一個文字框具有readonly屬性，所以它的字型顏色被設定為綠色。

相關文章