Кратко
СкопированоПсевдокласс :read
показывает что элемент, например, <input>
или <textarea>
, изменяется.
Пример
СкопированоПсевдокласс :read
показывает, что поле ввода можно изменить.
<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
может использоваться с другими псевдоэлементами и псевдоклассами.
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
:
<input>
— элементы любого типа, с возможностью редактирования и доступные не только для чтения. Это означает что у них не установлены атрибуты:read
или- only disabled
.<textarea>
— элементы доступны для изменения (без атрибутов:read
или- only disabled
).- Любой элемент не
<input>
и не<textarea>
, у которого установлен атрибут contenteditable.
После элемента из списка выше ставим двоеточие и пишем ключевое слово read
.
input:read-write,input:-moz-read-write { border: 1px solid red;}
input:read-write, input:-moz-read-write { border: 1px solid red; }
Псевдокласс :read
поддерживается в Chrome, Safari и Opera. Firefox поддерживает псевдокласс со специальным префиксом -moz
.