语法
:read-only {
css declarations;
}
:read-only 选择器的例子：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:-moz-read-only {
background-color: #ccc;
}
input:read-only {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<form>
<div>
<label for="normal">Example1</label>
<input value="normal input" id="normal">
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only">
</div>
</form>
</body>
</html>
枚举属性指示用户是否可以编辑元素。
在这种情况下，浏览器小部件被修改以允许编辑。
该属性应具有以下值之一：
- true（或者空字符串），表示该元素应该是可编辑的；
- false，表示该元素不可编辑。
具有 contenteditable 属性的 :read-only 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p:-moz-read-only {
background: #8ebf42;
}
p:read-only {
background: #8ebf42;
}
p[contenteditable="true"] {
color: #777777;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<p>这是普通的段落</p>
<p contenteditable="true">这是可编辑的段落！ 只需点击并编辑！</p>
</body>
</html>
悬停时带有 HTML <textarea> 标记的 :read-only 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
textarea:-moz-read-only {
background: #ffffff;
}
textarea:read-only {
background: #ffffff;
}
textarea:read-only:hover {
cursor: not-allowed;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<textarea cols="40" rows="5" readonly>这是悬停时 :read-only 选择器的示例。</textarea>
</body>
</html>
带有 HTML <div> 标签和 :after, :before 伪元素的 :read-only 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div:read-only:hover {
background-color: #eee;
}
div:read-only:before,
div:read-only:after {
content: "/";
padding: 10px;
color: #1c87c9;
font-size: 30px;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<div readonly>这是悬停时 :read-only 选择器的示例。</div>
<br/>
<div contenteditable="true">可编辑段落的示例！ 只需单击并编辑!</div>
</body>
</html>
:read-only 选择器选择“只读”的元素。
这些是用户不可编辑的元素。
可编辑的元素包括：
- <input> 非只读且未禁用的元素。
- <textarea> 既不是只读的也不是禁用的。
- 一个不是 <input> 或者 <textarea> 的元素，并且具有 contenteditable 属性集。
:read-only 选择器可以与其他选择器（例如 :hover）和伪元素（例如::after)。
Firefox 中的 -mozprefix 支持 :read-only 伪类选择器，格式如下：-moz-read-only。
日期：2020-06-02 22:14:45 来源：oir作者：oir