:read-write CSS 偽類 代表一個(gè)元素(例如可輸入文本的 input元素)可以被用戶編輯。
如果 input 元素不是只讀,即沒有 "readonly" 屬性,設(shè)置輸入框樣式為orange色:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(cainiaoplus.com)</title> <style> input:read-write { background-color: orange; } input:-moz-read-write { background-color: #bbf; } </style> </head> <body> <h3> :read-write 選擇器示例演示。</h3> <p>普通的input元素:<br><input value="hello"></p> <p>readonly只讀的input元素:<br><input readonly value="hello"></p> <p> :read-write 選擇器選取沒有設(shè)置 "readonly" 屬性的元素。</p> </body> </html>測試看看 ?/?
:read-write 選擇器用于匹配可讀及可寫的元素。
注意: 目前, 在大多瀏覽器中, :read-write 選擇器只使用于設(shè)置了input 和 textarea 元素。
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號。
選擇器 | |||||
---|---|---|---|---|---|
:read-only | 支持 | 不支持 | -moz- | Yes | Yes |
/* 選擇所有可編輯的 <input> 元素 */ /* Firefox 中需要加前綴 */ input:-moz-read-write { background-color: #bbf; } /* Supported in Blink/WebKit/Edge without a prefix */ input:read-write { background-color: #bbf; }
注意:這個(gè)選擇器不僅僅選擇 <input> 元素,它也會選擇所有可以被用戶編輯的元素,例如設(shè)置了 contenteditable 屬性的 <p> 元素。
CSS 選擇器 :read-only