CSS - 伪类 :read-write

CSS伪类 :read-write 匹配用户可以更改的元素，例如输入字段和 textareas。这包括没有 readonly 属性的元素。

语法


:read-write {
	 	/* ... */
}

为了获得更好的浏览器兼容性，您可以使用 -moz 和 -webkit 前缀。例如：input： -moz-read-write 和 input： -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">Editable Input:</label>
	 	<input type="text" id="editableInput" value="This is editable">

	 	<label for="readonlyInput">Read-only Input:</label>
	 	<input type="text" id="readonlyInput" value="This is read-only" 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>Form</h2>
	 	 	 <form>
	 	 	 <label for="name">Name:</label>
	 	 	 <input type="text" id="name" name="name" value="John Doe">

	 	 	 <label for="email">Email:</label>
	 	 	 <input type="email" id="email" name="email" value="john@example.com">

	 	 	 <label for="password">Password:</label>
	 	 	 <input type="password" id="password" name="password" value="124569763">
	 	 		
	 	 	 <div class="submit-container">
	 	 	 	 	<button type="submit">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">This is read-only div element</div><br>
	 	<div class="editable-para" contenteditable>This is editable div element</div>
</body>
</html>

本页