From bea647cbb318010b5739e7015774e2dfa6fe68ed Mon Sep 17 00:00:00 2001
From: DrakesBot12 <drakesweb.exe@gmail.com>
Date: Thu, 11 Jun 2026 19:27:48 +0300
Subject: [PATCH 1/4] docs: read-write

---
 css/read-write/demos/basic/index.html | 108 ++++++++++++++++++++++++++
 css/read-write/index.md               |  78 ++++++++++++-------
 2 files changed, 158 insertions(+), 28 deletions(-)
 create mode 100644 css/read-write/demos/basic/index.html
diff --git a/css/read-write/demos/basic/index.html b/css/read-write/demos/basic/index.html
new file mode 100644
index 0000000000..da2995724a
--- /dev/null
+++ b/css/read-write/demos/basic/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>:read-write — Дока демо</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      width: 360px;
+    }
+
+    label {
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      padding: 12px 14px;
+      border-radius: 6px;
+      border: 1px solid #ffffff;
+      background: transparent;
+      color: #fff;
+      font-size: 16px;
+      font-family: inherit;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    input:read-write,
+    textarea:read-write {
+      border-color: #2E9AFF;
+    }
+
+    input:read-write:focus,
+    textarea:read-write:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(46, 154, 255, 0.25);
+    }
+
+    textarea {
+      min-height: 120px;
+      resize: vertical;
+    }
+
+    .readonly {
+      opacity: 0.5;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+
+    <div>
+      <label>Редактируемое поле</label>
+      <input type="text" placeholder="Можно менять текст">
+    </div>
+
+    <div>
+      <label>Только для чтения</label>
+      <input type="text" value="Нельзя редактировать" readonly class="readonly">
+    </div>
+
+    <div>
+      <label>Textarea (редактируемое)</label>
+      <textarea placeholder="Пиши сюда..."></textarea>
+    </div>
+
+  </div>
+</body>
+</html>
diff --git a/css/read-write/index.md b/css/read-write/index.md
index e56029199b..21a4740690 100644
--- a/css/read-write/index.md
+++ b/css/read-write/index.md
@@ -3,6 +3,8 @@ title: "`:read-write`"
 description: "Показываем возможность изменения элемента."
 authors:
   - delioncourts
+contributors:
+  - drakesbot12
 keywords:
   - псевдокласс
 related:
@@ -11,58 +13,78 @@ related:
   - css/pseudoclasses
 tags:
   - doka
-  - placeholder
 ---
-
 ## Кратко
 
-Псевдокласс `:read-write` показывает что элемент, например, [`<input>`](/html/input/) или [`<textarea>`](/html/textarea/), изменяется.
+Псевдокласс `:read-write` применяется к элементам формы и другим узлам, которые пользователь может редактировать. Он помогает отличать редактируемые поля от тех, которые доступны только для чтения.
+
+К таким элементам относятся, например, `<input>`, `<textarea>` и любые элементы с атрибутом `contenteditable`.
 
 ## Пример
 
-Псевдокласс `:read-write` показывает, что поле ввода можно изменить.
+Покажем базовое использование: выделим редактируемое поле синей рамкой.
 
 ```html
-<form>
-  <label for="input-field">Зима близко</label>
-  <input id="input-field" type="text">
-</form>
+<label>
+  Редактируемое поле
+  <input type="text" placeholder="Можно менять текст">
+</label>
+<label>
+  Только для чтения
+  <input type="text" value="Нельзя редактировать" readonly class="readonly">
+</label>
+<label>
+  Textarea (редактируемое)
+  <textarea placeholder="Пиши сюда..."></textarea>
+</label>
 ```
 
 ```css
-input:read-write {
-  border: 1px solid blue;
+input:read-write,
+textarea:read-write {
+  border-color: #2E9AFF;
 }
 ```
 
-Как и другие селекторы псевдоклассов, `:read-write` может использоваться с другими псевдоэлементами и псевдоклассами.
+<iframe title="Демонстрация работы :target" src="demos/basic/" height="420"></iframe>
 
-```css
-textarea:read-write:focus {
-  box-shadow: 0 5px 10px gray;
-}
+## Как пишется
+
+Псевдокласс `:read-write` выбирает элементы, которые можно редактировать.
+
+Это:
 
-textarea:read-write::before {
-  content: "Что-то меняется...";
-  color: #aaa;
+- `<input>` без атрибутов `readonly` и `disabled`
+- `<textarea>` без `readonly` и `disabled`
+- элементы с `contenteditable`
+
+```css
+input:read-write,
+textarea:read-write,
+[contenteditable]:read-write {
+  border: 1px solid #2E9AFF;
 }
 ```
 
-## Как пишется
+## Как понять
 
-Элементы, к которым применяется псевдокласс `:read-write`:
+Браузер автоматически определяет, можно ли изменять содержимое элемента.
 
-- `<input>` — элементы любого типа, с возможностью редактирования и доступные не только для чтения. Это означает что у них не установлены атрибуты `:read-only` или [`disabled`](/html/disabled/).
-- `<textarea>` — элементы доступны для изменения (без атрибутов `:read-only` или `disabled`).
-- Любой элемент не `<input>` и не `<textarea>`, у которого установлен атрибут [contenteditable](/html/global-attrs/).
+Если элемент:
 
-После элемента из списка выше ставим двоеточие и пишем ключевое слово `read-write`.
+- не заблокирован (`disabled`)
+- не только для чтения (`readonly`)
+- или явно редактируем (`contenteditable`)
 
+-> он попадает под `:read-write`.
+
+## Подсказки
+
+💡 Чаще всего `:read-write` не используют напрямую в больших проектах, потому что его поведение почти совпадает с обычными селекторами для input/textarea.
+💡 Но он полезен, если у тебя есть гибкая форма, где состояние элементов меняется динамически через JavaScript.
+💡 В Firefox до сих пор может использоваться префикс:
 ```css
-input:read-write,
 input:-moz-read-write {
-  border: 1px solid red;
+  border-color: #2E9AFF;
 }
 ```
-
-Псевдокласс `:read-write` поддерживается в Chrome, Safari и Opera. Firefox поддерживает псевдокласс со специальным префиксом `-moz-`.

From bf6d843372a5ded3c39fba284ff4086cbff779d5 Mon Sep 17 00:00:00 2001
From: DrakesBot12 <drakesweb.exe@gmail.com>
Date: Thu, 11 Jun 2026 19:43:36 +0300
Subject: [PATCH 2/4] docs: read-write

---
 css/read-write/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/read-write/index.md b/css/read-write/index.md
index 21a4740690..96e0ff5507 100644
--- a/css/read-write/index.md
+++ b/css/read-write/index.md
@@ -46,7 +46,7 @@ textarea:read-write {
 }
 ```
 
-<iframe title="Демонстрация работы :target" src="demos/basic/" height="420"></iframe>
+<iframe title="Демонстрация работы :read-write" src="demos/basic/" height="420"></iframe>
 
 ## Как пишется
 

From 968e7f37b5ddbccf1250fb0ea917a9b0a8736943 Mon Sep 17 00:00:00 2001
From: Alena Batitskaia <batickaya.a@gmail.com>
Date: Sun, 30 Aug 2026 02:44:05 +0100
Subject: [PATCH 3/4] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=B2=D0=B5=D1=82=D0=BA=D1=83=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BF=D1=80=D0=BE=D0=B3=D0=BE=D0=BD=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit


From 44f4735f2dc5f966896ccc50e030983b3048c623 Mon Sep 17 00:00:00 2001
From: vitya-ne <9317613+vitya-ne@users.noreply.github.com>
Date: Mon, 7 Sep 2026 21:43:05 +0300
Subject: [PATCH 4/4] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=BA=D0=BE=D0=BD=D1=84=D0=B8=D0=B3=20baseline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/read-write/index.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/css/read-write/index.md b/css/read-write/index.md
index 96e0ff5507..a6059b8286 100644
--- a/css/read-write/index.md
+++ b/css/read-write/index.md
@@ -1,6 +1,10 @@
 ---
 title: "`:read-write`"
 description: "Показываем возможность изменения элемента."
+baseline:
+  - group: read-write-pseudos
+    features:
+      - css.selectors.read-write
 authors:
   - delioncourts
 contributors:
