:read-only CSS Pseudo Class

Description

The :read-only pseudo-class applies to form fields that have the readonly attribute set. Such a field cannot be modified, while it receives focus and the data in such a field can be selected and copied.

Syntax

input:read-only { ... } 

Example

<p>
<input type="text" name="comment" size="40" value="Entered text can not be changed." readonly>
</p>
<p>
<input type="submit" value="Submit">
</p>
input:read-only { 
background: yellow;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X1311.5Yes4
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes3.21.0