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-write Selector
The CSS :read-write pseudo-class selector targets form elements that are both readable and writable by the user. This selector applies styles specifically to input fields and textareas that can be edited, excluding read-only elements.
Syntax
:read-write {
/* CSS properties */
}
Elements Targeted
The :read-write selector matches:
-
<input>elements without thereadonlyattribute -
<textarea>elements without thereadonlyattribute - Elements with
contenteditable="true"
Example
The following example demonstrates how :read-write styles only the editable input field −
<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
background-color: #e8f5e8;
border: 2px solid #4CAF50;
color: #2e7d32;
padding: 8px;
border-radius: 4px;
}
input:read-only {
background-color: #f5f5f5;
border: 1px solid #ccc;
color: #666;
padding: 8px;
border-radius: 4px;
}
label {
display: inline-block;
width: 80px;
margin: 10px 0;
}
</style>
</head>
<body>
<form>
<label>Subject:</label>
<input type="text" name="subject" value="Mathematics"><br>
<label>Student:</label>
<input type="text" name="student" readonly value="John Doe"><br>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter email">
</form>
</body>
</html>
The editable "Subject" and "Email" fields display with green background and borders, while the read-only "Student" field appears with gray styling to indicate it cannot be modified.
Conclusion
The :read-write selector provides an effective way to visually distinguish editable form elements from read-only ones, improving user experience by clearly indicating which fields can be modified.
Updated on: 2026-03-15T12:24:01+05:30
138 Views
Advertisements