:read-only CSS Pseudo Class
Description
The :read-only pseudo-class in CSS is used to select and style form elements that are in a "read-only" state. This state occurs when an input, textarea, or select element is set to be non-editable by the user, typically using the HTML readonly attribute.
When you apply the :read-only pseudo-class to an element, you can define specific styles for it, such as changing the text color, background color, or adding any other CSS properties to visually indicate that the input is read-only and cannot be modified by the user.
Here's an example of how you might use the :read-only pseudo-class in CSS:
input:read-only {
background-color: lightgray;
color: darkgray;
border: 1px solid gray;
cursor: not-allowed;
}
In this example, when an
<input> element has the readonly attribute set in the HTML code, it will have a light gray background, dark gray text color, a gray border, and the cursor will change to a "not-allowed" icon, indicating to the user that they cannot edit the input field.
Syntax
: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
The following table will show you the current browser support for the CSS :read-only pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 13 | 1 | 78 | 9 | 4 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 3.2 | 1 | 37 |
Last updated by CSSPortal on: 1st October 2023