CSS :read-write Pseudo Class
The :read-write CSS pseudo-class selects the elements that are editable by the user. Read about the pseudo-class and practice with examples.
The :read-write selector selects elements which are editable by the user.
Elements that are editable include:
<input>elements that are not read-only and that are not disabled.<textarea>that is neither read-only nor disabled.- An element that is not an
<input>or a<textarea>, and that has thecontenteditableattribute set.
Info
Browser support for the :read-write pseudo-class varies. While the element's actual editable state remains the same, some browsers may not apply the associated styles or may treat the pseudo-class differently.
The :read-only selector is the counterpart of the :read-write selector. It selects all elements that do not match :read-write.
Version
Syntax
CSS :read-write syntax example
:read-write {
css declarations;
}Example of the :read-write selector:
CSS :read-write code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
:read-write {
background: lightgreen;
}
</style>
</head>
<body>
<h2>:read-write selector example</h2>
<form>
<div>
<label for="read-write">Example1</label>
<input value="read-write input" id="read-write" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>Browser Compatibility
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Opera | Yes |
Practice
Practice
What can you learn from the 'Read/Write' section on W3Docs?