Селектор :read-write у CSS — поля, доступні для змін

HTML

<div class="cols">
    <form class="card">
        <h4>Що збігається в формі</h4>
        <p><input type="text" value="звичайне текстове"></p>
        <p><input type="number" value="42"></p>
        <p><input type="text" value="readonly" readonly></p>
        <p><input type="text" value="disabled" disabled></p>
        <p><textarea rows="2">текстова область</textarea></p>
        <p><label><input type="checkbox" checked> прапорець</label></p>
        <p><select><option>список</option></select></p>
        <p><button type="button">кнопка</button></p>
        <p class="verdict">Зелена рамка — <code>:read-write</code>.
            Прапорець, список і кнопка не збігаються НІКОЛИ: їм нічого вписувати.
            Поля <code>readonly</code> і <code>disabled</code> теж поза грою.</p>
    </form>

    <div class="card">
        <h4>Редагований блок</h4>
        <div class="ce" contenteditable="true">
            Клацніть сюди й пишіть — це не поле форми, а звичайний блок.
            <p>А це абзац усередині нього. Він теж <code>:read-write</code>,
                хоч на ньому немає жодного атрибута.</p>
        </div>
        <div class="ce plain">
            Цей блок без <code>contenteditable</code> — тому він
            <code>:read-only</code>, як і решта сторінки.
            <p>І цей абзац усередині — теж <code>:read-only</code>:
                зеленого пунктиру на ньому немає.</p>
        </div>
        <p class="verdict">⚠️ <code>:read-only</code> без уточнення теґа збігається
            майже з усім документом — від <code>&lt;html&gt;</code> до кожного
            абзацу. Тому правило пишуть як <code>input:read-only</code>.</p>
    </div>
</div>

CSS

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.card {
    flex: 1 1 300px;
    padding: 4px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.card h4 {
    margin: 14px 0 10px;
}

.card p {
    margin: 9px 0;
}

/* редаговане — зелене; нередаговане поле — сіре й без рамки */
input:read-write,
textarea:read-write,
[contenteditable]:read-write {
    background: #fff;
    outline: 2px solid #3a9a4f;
    outline-offset: 2px;
}

input:read-only,
textarea:read-only {
    background: #eef1f5;
    color: #5a6472;
    border: 1px solid transparent;
}

/* нащадки редагованого блока теж :read-write — хоч на них немає атрибутів */
.ce p:read-write {
    outline: 2px dashed #3a9a4f;
    outline-offset: 2px;
}

.ce {
    margin-bottom: 12px;
    padding: 6px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
}

.ce.plain {
    background: #eef1f5;
    color: #5a6472;
}

.ce p {
    margin: 8px 0 4px;
}

.verdict {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    color: #5a6472;
    font-size: .85em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

HTML

<input type="text" value="редагується — жовте">
<input type="text" value="лише читання" readonly>

CSS

input:read-write {
    background-color: yellow;
}