:read-write

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Lớp giả :read-write trong CSS (pseudo-class) đại diện cho một phần tử (chẳng hạn như input hoặc textarea) có thể chỉnh sửa bởi người dùng.

Try it

label,
input[type="submit"] {
  display: block;
  margin-top: 1em;
}

*:read-write {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

<p>Please fill in your details:</p>

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

  <label for="note">Short note about yourself:</label>
  <textarea id="note" name="note">Don't be shy</textarea>

  <label for="pic">Your picture:</label>
  <input id="pic" name="pic" type="file" />

  <input type="submit" value="Submit form" />
</form>

Cú pháp

css

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

Bạn có thể sử dụng các điều khiển biểu mẫu readonly khi muốn người dùng xác minh thông tin họ đã nhập trước đó, mà bạn muốn gửi cùng với dữ liệu mới trong các điều khiển đọc-ghi. Trong ví dụ dưới đây, lớp giả :read-only được sử dụng để làm cho <textarea> (địa chỉ của người dùng) trông như một đoạn văn bình thường. Lớp giả :read-write cung cấp cách làm nổi bật <textarea> có thể chỉnh sửa (hướng dẫn giao hàng):

body {
  font-family: "Josefin Sans", sans-serif;
  margin: 10px auto;
}

legend {
  color: white;
  background: black;
  padding: 5px 10px;
}

fieldset > div {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

button,
label,
textarea {
  display: block;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 5px;
  height: 30px;
}

textarea {
  width: 50%;
}

textarea {
  height: 70px;
  resize: none;
}

label {
  width: 40%;
}

css

textarea:read-only {
  border: 0;
}

textarea:read-write {
  box-shadow: inset 1px 1px 3px #cccccc;
  border-radius: 5px;
}

html

<form>
  <fieldset>
    <legend>Confirm details</legend>
    <div>
      <label for="address">Address:</label>
      <textarea id="address" name="address" readonly>
123 Choco Mountain,
Awesome Ridge,
CA</textarea
      >
    </div>
    <div>
      <label for="instructions">Delivery instructions</label>
      <textarea id="instructions" name="instructions"></textarea>
    </div>
  </fieldset>
  <button type="submit">Confirm</button>
</form>

Tạo kiểu cho các điều khiển không phải biểu mẫu đọc-ghi

Bộ chọn này không chỉ chọn các phần tử <input>/<textarea> mà nó sẽ chọn bất kỳ phần tử nào có thể chỉnh sửa bởi người dùng, chẳng hạn như phần tử <p> với thuộc tính contenteditable được đặt trên đó.

html

<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>

css

body {
  font-family: sans-serif;
}

p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}