CSS 伪类

CSS :read -only 伪类选择用户无法编辑的元素，例如输入字段和文本区域。这包括具有只读属性的元素。

语法

:read-only {
   /* ... */
}
为了获得更好的浏览器兼容性，您可以使用 -moz 和 -webkit 前缀。例如:输入:-moz-read-only 和输入:-webkit-read-only。

CSS :read-only  基本示例

以下示例演示如何使用 :read-仅伪类 -

<html>
<head>
<style>
   input:read-only {
      background-color: pink;
      border: 1px solid red;
   }
</style>
</head>
<body>
   <label for="readonlyInput">Read-only Input:</label>
   <input type="text" id="readonlyInput" value="This is read-only" readonly>

   <label for="editableInput">Editable Input:</label>
   <input type="text" id="editableInput" value="This is editable">
</body>
</html>

CSS :read-only  确认表单信息

这里是一个简单的预订确认表单的示例，它使用户清楚地了解这些字段是read-only -

<html>
<head>
<style>
   .form-container {
      width: 300px;
      margin: 0 auto;
   }
   label {
      display: block;
      margin-top: 10px;
   }
   input:read-only {
      background-color: pink;
      border: none;
   }
   .submit-container {
      margin-top: 10px;
   }
   button {
      background-color: red;
      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="张三" readonly>

      <label for="email">邮箱:</label>
      <input  type="email" id="email" name="email" value="zs@example.com" readonly>

      <label for="password">密码:</label>
      <input type="password" id="password" name="password" value="124569763" readonly>
      
      <div class="submit-container">
         <button type="submit">提交</button>
      </div>
      </form>
   </div>
</body>
</html>

CSS :read-only 设置只读非表单控件的样式

以下示例演示如何使用 :read-only 伪类来选择任何不能选择的元素由用户编辑。−

<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>