CSS :read-only — поле лише для читання

Селектор :read-only обирає тільки <input> елементи, котрі доступні тільки для читання, тобто у яких вказаний атрибут readonly.

правити

Загальний опис

правити

Нотатка

На данний момент, в більшості браузерів, селектор :read-only поширюється тільки на елементи <input> та <textarea>, але він може, також, застосовуватися до всіх елементів у яких вказаний атрибут readonly.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:read-only {


    css declarations;


}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	78	4	9	13	—

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	79	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<form class="f">
    <label>Номер замовлення <input value="A-1024" readonly></label>
    <label>Знижка <input value="10%" disabled></label>
    <label>Коментар <input placeholder="можна писати"></label>
</form>

.f {
    display: grid;
    gap: .7rem;
    max-width: 20rem;
    font: 15px system-ui, sans-serif;
}

.f input {
    display: block;
    width: 100%;
    padding: .5rem;
    border: 1px solid #94a3b8;
    border-radius: 6px;
}

/* лише поля, а не вся сторінка */
input:read-only {
    background: #f8fafc;
    border-style: dashed;
    color: #475569;
}

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

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