diff --git a/css/index.md b/css/index.md index 9905e53f74..0f21116500 100644 --- a/css/index.md +++ b/css/index.md @@ -55,6 +55,7 @@ groups: - lang - root - indeterminate + - read-only - picture-in-picture - fullscreen - name: 'Псевдоэлементы' diff --git a/css/read-only/demos/basic/index.html b/css/read-only/demos/basic/index.html new file mode 100644 index 0000000000..6752f1a7f0 --- /dev/null +++ b/css/read-only/demos/basic/index.html @@ -0,0 +1,152 @@ + + + + Демо :read-only — Псевдокласс :read-only — Дока + + + + + + + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ 💡 Попробуйте кликнуть по полям и ввести текст. Поля только для чтения имеют серый фон и курсор "not-allowed". +
+
+
+ + diff --git a/css/read-only/index.md b/css/read-only/index.md index c1fda43a06..43dfd390fe 100644 --- a/css/read-only/index.md +++ b/css/read-only/index.md @@ -1,27 +1,93 @@ --- title: "`:read-only`" description: "Задаёт стили полям ввода, которые доступны только для чтения." +baseline: + - group: read-write-pseudos + features: + - css.selectors.read-only authors: - kamenskaya +contributors: + - drakesbot12 related: - css/link - css/hover - css/focus keywords: - стили для чтения + - readonly + - поля ввода + - псевдокласс tags: - doka - - placeholder --- - ## Кратко Псевдокласс `:read-only` используется для задания стилей полям ввода только для чтения. Другими словами - данные в этом поле ввода пользователь не может изменить или удалить. Поле ввода при этом получает фокус, а данные в поле можно выделить и скопировать. +## Пример + +Стилизуем поля только для чтения, делая их визуально отличными от обычных полей: + +```css +input:read-only { + background-color: #f5f5f5; + color: #666; + border-color: #ddd; + cursor: not-allowed; +} + +textarea:read-only { + background-color: #f5f5f5; + color: #666; + border-color: #ddd; + cursor: not-allowed; +} +``` + +```html + + + +``` + + ## Как пишется Псевдокласс `:read-only` применяется к тегам для ввода текста ([``](/html/input/) или [`