:read-write CSS Pseudo Class
Description
The CSS :read-write pseudo-class selects elements that are editable by the user. This can include form elements such as input, textarea, and select, as well as other elements that have the contenteditable attribute set.
The :read-write pseudo-class can be used to style elements differently depending on whether or not they are editable. For example, you could use it to highlight editable elements with a border, or to make them more visually distinct from read-only elements.
Here is an example of how to use the :read-write pseudo-class:
input:read-write {
border: 1px solid blue;
}
This will add a blue border to all input elements that are editable.
The
:read-write pseudo-class can also be used in combination with other pseudo-classes to create more complex styling. For example, you could use it to style editable elements differently when they are focused or hovered over.Here is an example of how to use the
:read-write pseudo-class in combination with the :hover pseudo-class:input:read-write:hover {
background-color: yellow;
}
This will turn the background color of all editable input elements yellow when the user hovers over them.
The
:read-write pseudo-class is a powerful tool that can be used to create more user-friendly and visually appealing web forms.Syntax
:read-write {
/* ... */
}
Example
<p>
<input type="text" size="40" value="Entered text can not be changed." readonly>
</p>
<p>
<input type="text" size="40" value="This text is you can change.">
</p>
<p>
<input type="submit" value="Submit">
</p>input:read-write {
border: 1px solid green;
} Browser Support
The following table will show you the current browser support for the CSS :read-write 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