W3docs
ru
Войти

Псевдокласс CSS :read-only

Псевдокласс CSS :read-only выбирает элементы, недоступные для редактирования. Читайте о псевдоклассе и изучайте примеры.

Псевдокласс CSS :read-only соответствует любому элементу, который пользователь не может редактировать. Он является полной противоположностью :read-write: каждый элемент соответствует одному из них, но никогда обоим сразу. Используйте его, чтобы придать полям только для чтения особый вид — например, приглушённый фон — и пользователи сразу поймут, какие поля они могут изменять.

Пример селектора read-only

Что считается редактируемым

Элемент является редактируемым (и поэтому соответствует :read-write, а не :read-only) в следующих случаях:

  • Элемент <input>, у которого нет атрибутов readonly и disabled.
  • Элемент <textarea>, у которого нет атрибутов readonly и disabled.
  • Любой другой элемент с атрибутом contenteditable, установленным в true.

Всё остальное является доступным только для чтения, поэтому :read-only соответствует элементу в следующих случаях:

  • это <input> или <textarea> с атрибутом readonly, или
  • это обычный элемент, у которого атрибут contenteditable имеет значение false или отсутствует (большая часть страницы — абзацы, заголовки, блоки div и т. д.).

Одна распространённая ошибка: атрибут readonly на <div> или <p> не имеет никакого эффекта, поскольку readonly применяется только к элементам форм. Такой элемент соответствует :read-only просто потому, что он изначально недоступен для редактирования — а не из-за атрибута readonly. Чтобы сделать элемент, не являющийся элементом формы, редактируемым, используйте contenteditable="true".

:read-only можно объединять с другими селекторами (например, :hover) и комбинировать с псевдоэлементами (например, ::after).

Версия

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Синтаксис

Синтаксис 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?
Что выбирает псевдокласс CSS :read-only?
Was this page helpful?