Marusya's School Notes

The :Read-Write Pseudo-Class

The :read-write selector selects form elements which are "readable" and "writeable". Form elements with no "readonly" attribute, and no "disabled" attribute are defined as "read-" and "write-able". Note: Currently, in most browsers, the :read-write selector only applies to input and textarea elements, where the "readonly" attribute is not present, regardless if the element is disabled or not. In this demonstration, the selector selects and styles only if the input element is not "readonly":

HTML file:	Displayed by browser:
<style> input:-moz-read-write { /* For Firefox */ background-color: yellow; } input:read-write { background-color: yellow; } </style> <body> <h3>A demonstration of the :read-write selector.</h3> <p>A normal input element:<br /><input value="hello"></p> <p>A readonly input element:<br /><input readonly value="hello"></p> <p>The :read-only selector selects form elements with no "readonly" attribute.</p> </body>	A demonstration of the :read-write selector. A normal input element: A readonly input element: The :read-write selector selects form elements with no "readonly" attribute.

HTML file:

Displayed by browser:

<body>
<h3>A demonstration of the :read-write selector.</h3>
<p>A normal input element:<br /><input value="hello"></p>
<p>A readonly input element:<br /><input readonly value="hello"></p>
<p>The :read-only selector selects form elements with no "readonly" attribute.</p>
</body>

A demonstration of the :read-write selector.

A normal input element:

A readonly input element:

The :read-write selector selects form elements with no "readonly" attribute.

Note: The :read-only selector is supported in Chrome, Safari and Opera but not by Internet Explorer. Firefox supports an alternative, the :-moz-read-write selector.