:read-only CSS 偽類 表示元素不可被用戶編輯的狀態(tài)（如鎖定的文本輸入框）。
將 input 元素設(shè)置了 "readonly" 屬性的輸入，設(shè)置背景色為藍(lán)綠色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(cainiaoplus.com)</title>
<style>
input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }
p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }
</style>
</head>
<body>
<input type="text" value="在這里輸入你想要的任何東西.">
<input type="text" value="只讀." readonly>
<p>普通段落.</p>
<p contenteditable="true">可編輯的段落!</p>
</body>
</html>測試看看 ?/?:read-only 選擇器用于選取設(shè)置了 "readonly" 屬性的元素。
表單元素可以設(shè)置 "readonly" 屬性來定義元素只讀。
注意： 目前，大多數(shù)瀏覽器, :read-only 選擇器適用于 input 和 textarea 元素，但是它也適用于設(shè)置了 "readonly" 屬性的元素。
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
| 選擇器 | |||||
|---|---|---|---|---|---|
| :read-only | 支持 | 不支持 | -moz- | Yes | Yes |
/* 選擇任何只讀的input元素，要在Firefox中支持,需加-moz前綴 */
input:-moz-read-only {
background-color: #ccc;
}
input:read-only {
background-color: #ccc;
}注意：這個(gè)選擇器不只是選擇具有 readonly 屬性的<input> 元素，它也會(huì)選擇所有的不能被用戶編輯的元素。
CSS 選擇器 :read-write