/ ↲
    Расширенный поиск

    CSS

    :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-.

    Читайте также