CSS :read -write 伪类匹配用户可以更改的元素,例如输入字段和文本区域。这包括不具有 readonly 属性的元素。
语法
:read-write {
/* ... */
}
为了获得更好的浏览器兼容性,您可以使用 -moz 和 -webkit 前缀。例如:输入:-moz-read-write 和输入:-webkit-read-write。
CSS :read-write 基本示例
这里是一个示例,说明如何使用:read-write伪类 -
<html>
<head>
<style>
input:read-only {
background-color: pink;
border: 1px solid red;
}
</style>
</head>
<body>
<label for="editableInput">可编辑输入:</label>
<input type="text" id="editableInput" value="这是可编辑的">
<label for="readonlyInput">只读输入:</label>
<input type="text" id="readonlyInput" value="这是只读的" readonly>
</body>
</html>
CSS :read-write 确认表单信息
这里是一个带有可编辑字段的预订确认表单的示例 -
<html>
<head>
<style>
.form-container {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
}
input:read-write {
background-color: violet;
border: none;
}
.submit-container {
margin-top: 10px;
}
button {
background-color: green;
border: none;
padding: 10px;
color: white;
}
</style>
</head>
<body>
<div class="form-container">
<h2>表单</h2>
<form>
<label for="name">名字:</label>
<input type="text" id="name" name="name" value="张三">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="zs@example.com">
<label for="password">密码:</label>
<input type="password" id="password" name="password" value="124569763">
<div class="submit-container">
<button type="submit">提交</button>
</div>
</form>
</div>
</body>
</html>
CSS :read-write 读写非表单控件样式
以下示例演示如何使用 :read-write 伪类来选择用户可以编辑的任何元素。−
<html>
<head>
<style>
div.read-only-para {
background-color: pink;
border: 1px solid red;
}
div.editable-para {
background-color: violet;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="read-only-para">这是只读 div 元素</div><br>
<div class="editable-para" contenteditable>这是可编辑的 div 元素</div>
</body>
</html>