Псевдокласс CSS :read-only
Селектор :read-only выбирает элементы, которые не могут быть отредактированы пользователем.
К редактируемым элементам относятся:
- Элементы
<input>, которые не имеют атрибутаreadonlyи не отключены (disabled). - Элементы
<textarea>, которые не имеют атрибутаreadonlyи не отключены (disabled). - Элементы, которые не являются
<input>или<textarea>, но имеют атрибутcontenteditable, установленный вtrue.
И наоборот, :read-only соответствует этим элементам, когда атрибут contenteditable равен false или отсутствует.
Селектор :read-only можно комбинировать с другими селекторами (например, :hover) и псевдоэлементами (например, ::after).
Версия
CSS Basic User Interface Module Level 3
Синтаксис
Синтаксис CSS :read-only
:read-only {
css declarations;
}Пример использования селектора :read-only:
Пример кода CSS :read-only
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<form>
<div>
<label for="normal">Example1</label>
<input value="normal input" id="normal" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>Перечисляемый атрибут contenteditable указывает, может ли пользователь редактировать элемент. При включении виджет браузера изменяется, чтобы разрешить редактирование. Атрибут должен принимать одно из следующих значений:
true(или пустая строка), указывающее, что элемент должен быть редактируемым;false, указывающее, что элемент не должен быть редактируемым.
Пример использования селектора :read-only с атрибутом contenteditable:
Пример псевдокласса CSS :read-only с атрибутом contenteditable
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:read-only {
background: #8ebf42;
}
p[contenteditable="true"] {
color: #777777;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<p>Example of a normal paragraph.</p>
<p contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</p>
</body>
</html>Пример использования селектора :read-only с HTML-тегом <textarea> при наведении:
Пример использования селектора CSS :read-only с HTML-тегом <textarea> и состоянием при наведении
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea:read-only {
background: #ffffff;
}
textarea:read-only:hover {
cursor: not-allowed;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<textarea cols="40" rows="5" readonly>Here is an example of :read-only selector on hover.</textarea>
</body>
</html>Пример использования селектора :read-only с HTML-тегом <div> и псевдоэлементами :after, :before:
Пример псевдокласса CSS :read-only с псевдоэлементами :before, :after
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:read-only:hover {
background-color: #eee;
}
div:read-only:before,
div:read-only:after {
content: " / ";
padding: 10px;
color: #1c87c9;
font-size: 30px;
}
</style>
</head>
<body>
<h2>:read-only selector example</h2>
<div readonly>Here is an example of :read-only selector on hover.</div>
<br />
<div contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</div>
</body>
</html>Практика
Что выбирает псевдокласс CSS :read-only?