:read-write

Показываем возможность изменения элемента.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Псевдокласс :read-write показывает что элемент, например, <input> или <textarea>, изменяется.

Пример

Секция статьи "Пример"

Псевдокласс :read-write показывает, что поле ввода можно изменить.

        
          
          <form>  <label for="input-field">Зима близко</label>  <input id="input-field" type="text"></form>
          <form>
  <label for="input-field">Зима близко</label>
  <input id="input-field" type="text">
</form>

        
        
          
        
      
        
          
          input:read-write {  border: 1px solid blue;}
          input:read-write {
  border: 1px solid blue;
}

        
        
          
        
      

Как и другие селекторы псевдоклассов, :read-write может использоваться с другими псевдоэлементами и псевдоклассами.

        
          
          textarea:read-write:focus {  box-shadow: 0 5px 10px gray;}textarea:read-write::before {  content: "Что-то меняется...";  color: #aaa;}
          textarea:read-write:focus {
  box-shadow: 0 5px 10px gray;
}

textarea:read-write::before {
  content: "Что-то меняется...";
  color: #aaa;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Элементы, к которым применяется псевдокласс :read-write:

  • <input> — элементы любого типа, с возможностью редактирования и доступные не только для чтения. Это означает что у них не установлены атрибуты :read-only или disabled.
  • <textarea> — элементы доступны для изменения (без атрибутов :read-only или disabled).
  • Любой элемент не <input> и не <textarea>, у которого установлен атрибут contenteditable.

После элемента из списка выше ставим двоеточие и пишем ключевое слово read-write.

        
          
          input:read-write,input:-moz-read-write {  border: 1px solid red;}
          input:read-write,
input:-moz-read-write {
  border: 1px solid red;
}

        
        
          
        
      

Псевдокласс :read-write поддерживается в Chrome, Safari и Opera. Firefox поддерживает псевдокласс со специальным префиксом -moz-.