CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS :read-write selector

:read-write CSS pseudo-classes represent an element (such as an input element for editable text) that can be edited by the user.

Complete CSS Selector Reference Manual

Online Example

If the input element is not read-only, i.e., does not have the "readonly" attribute, set the input box style to orange:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>/title>　
<style>
input:read-write
{
　　　　background-color: orange;
}
input:-moz-read-write {
　　background-color: #bbf;
}
</style>
</head>
<body>
<h3> :read-write selector example demonstration.</h3>
<p>Normal input element:<br><input value="hello"></p>
<p>Read-only input element:<br><input readonly value="hello"></p>
<p> :read-The write selector selects elements that have not set the "readonly" attribute.</p>
</body>
</html>

Test see if ‹/›

Definition and Usage

:read-The write selector is used to match elements that are both readable and writable.

Note: Currently, in most browsers, :read-The write selector is only used for elements that have input and textarea elements set.

Browser Compatibility

The numbers in the table indicate the first browser version number that supports this attribute.

Selector
:read-only	Supported	Not Supported	-moz-	Yes	Yes

CSS Syntax

/*　Select all editable <input> elements　*/
/*　Prefix required in Firefox　*/
input:-moz-read-write {
　　background-color: #bbf;
}
/*　Supported in Blink/WebKit/Edge without a prefix　*/
input:read-write {
　　background-color: #bbf;
}

Note: This selector does not only select <input> elements, it will also select all elements that can be edited by the user, such as <p> elements with the contenteditable attribute set.

CSS Selector :read-only