CSS Pseudo-Class: :read-only

The :read-only pseudo-class in CSS is used to style <input>, <textarea>, and <select> elements that cannot be modified by the user. This is particularly useful for displaying fields that provide information but should not be editable by users. Let's explore how to use this pseudo-class with examples.


/* CSS */
input:read-only {
    background-color: #e0e0e0; /* Light gray for read-only input */
    color: #666; /* Dark gray text color */
}

textarea:read-only {
    background-color: #f0f0f0; /* Light gray for read-only textarea */
    color: #999; /* Lighter gray text color */
}

Result:

This text cannot be changed.

In this example, we have styled read-only <input> and <textarea> elements with different background and text colors to signify that they are not editable. The background-color property is used to distinguish the read-only fields visually.

Example Breakdown

Let's analyze the code step by step:


/* CSS Styling */
input:read-only {
    background-color: #e0e0e0;
}
textarea:read-only {
    background-color: #f0f0f0;
}

/* HTML Code */
<input type="text" value="This is read-only" readonly>
<textarea readonly>This text cannot be changed.</textarea>

Result:

This text cannot be changed.

The CSS rules define styles for <input> and <textarea> elements that have the readonly attribute.
The background-color for the read-only fields is set to a light gray tone, indicating they are uneditable.
The HTML structure includes a sample read-only <input> and <textarea> element to see the effect of the styles in action.

Conclusion

The :read-only pseudo-class is a powerful tool to enhance user experience by visually indicating which fields are not meant to be edited. Use it wisely to guide your users in forms and applications.