Skip to content

Дополняет доку про псевдокласс :read-write #6030

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DrakesBot12 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Дополняет доку про псевдокласс :read-write #6030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bea647c
docs: read-write
DrakesBot12 Jun 11, 2026
bf6d843
docs: read-write
DrakesBot12 Jun 11, 2026
968e7f3
Обновляет ветку для прогона проверок
solarrust Aug 30, 2026
fba674f
Merge branch 'main' into css/read-write
solarrust Sep 3, 2026
f60c133
Merge branch 'main' into css/read-write
vitya-ne Sep 7, 2026
44f4735
Добавляет конфиг baseline
vitya-ne Sep 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions css/read-write/demos/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
82 changes: 54 additions & 28 deletions css/read-write/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
---
title: "`:read-write`"
description: "Показываем возможность изменения элемента."
baseline:
- group: read-write-pseudos
features:
- css.selectors.read-write
authors:
- delioncourts
contributors:
- drakesbot12
keywords:
- псевдокласс
related:
Expand All @@ -11,58 +17,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="Демонстрация работы :read-write" 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-`.
Loading