在CSS中，:read-only 伪类可以用于选择只读表单控件。例如，当一个输入框设置为只读时，可以使用 :read-only 伪类来选择该输入框，并将其样式设置为指定的样式。以下是在CSS中使用 :read-only 伪类的示例：
input:read-only {
color: gray;
background-color: #f0f0f0;
}在这个示例中，:read-only 伪类选择了所有只读的表单控件，并将它们的颜色设置为灰色，背景颜色设置为淡灰色。
下面是一个完整的HTML5页面示例，包括 <head> 部分中设置字符集为UTF-8的 <meta> 元素和一个包含多个表单控件的 <body> 部分。这个页面使用了上述CSS样式来为只读输入框设置灰色文本和淡灰色背景颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Page</title>
<style>
input:read-only {
color: gray;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>Welcome to Example Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" readonly>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" readonly>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" readonly>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>在这个示例中，<meta> 元素用于设置页面的字符集为UTF-8，这可以确保浏览器正确解析页面中的非ASCII字符。<style> 元素用于将上述CSS样式应用于页面中的只读表单控件。<body> 元素包含了一个表单控件，其中只读输入框将受到CSS样式的影响。如果输入框被设置为只读，则它将被选中，并将其文本颜色设置为灰色，背景颜色设置为淡灰色。
正文完