CSS偽類 - :read-write

CSS :read-write 偽類匹配可以被使用者更改的元素，例如輸入欄位和文字區域。這包括不具有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>

列印頁面