Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Role of CSS : read-only Selector
The CSS :read-only selector is used to select form elements that have the readonly attribute set. This pseudo-class targets input fields and textarea elements that users cannot modify, making it useful for styling non-editable form fields differently from editable ones.
Syntax
:read-only {
/* styles */
}
input:read-only {
/* styles for read-only input elements */
}
textarea:read-only {
/* styles for read-only textarea elements */
}
Example: Basic Read-Only Styling
The following example demonstrates how to style read-only input fields with a distinct background color and text color −
<!DOCTYPE html>
<html>
<head>
<style>
input:read-only {
background-color: #e9ecef;
color: #495057;
border: 1px solid #ced4da;
}
input:not(:read-only) {
background-color: white;
border: 1px solid #007bff;
}
label {
display: block;
margin: 10px 0 5px 0;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label>Editable Field:</label>
<input type="text" name="editable" value="You can edit this">
<label>Read-Only Field:</label>
<input type="text" name="readonly" readonly value="Cannot edit this">
<label>Another Read-Only Field:</label>
<input type="text" name="readonly2" readonly value="Also read-only">
</form>
</body>
</html>
A form appears with three input fields. The first field has a white background with blue border (editable), while the second and third fields have a gray background with gray border and darker text (read-only). The read-only fields cannot be modified by the user.
Example: Styling Read-Only Textarea
The :read-only selector also works with textarea elements −
<!DOCTYPE html>
<html>
<head>
<style>
textarea:read-only {
background-color: #f8f9fa;
color: #6c757d;
border: 2px dashed #dee2e6;
cursor: not-allowed;
}
textarea:not(:read-only) {
background-color: white;
border: 2px solid #28a745;
}
textarea {
width: 300px;
height: 80px;
margin: 10px 0;
padding: 8px;
}
</style>
</head>
<body>
<h3>Editable Textarea:</h3>
<textarea>This content can be modified</textarea>
<h3>Read-Only Textarea:</h3>
<textarea readonly>This content cannot be modified</textarea>
</body>
</html>
Two textarea elements appear. The first has a white background with green border and allows editing. The second has a light gray background with a dashed gray border and shows a "not-allowed" cursor when hovered, indicating it's read-only.
Conclusion
The :read-only pseudo-class selector is essential for creating distinct visual cues for non-editable form elements. It helps users immediately identify which fields they can modify and which are for display purposes only, improving overall user experience and form usability.
Updated on: 2026-03-15T12:23:31+05:30
184 Views
Advertisements