The :read-only selector selects elements which are "readonly". Form elements with a "readonly" attribute are defined as "readonly". Note: Currently, in most browsers, the :read-only selector only applies to input and textarea elements, but it should apply to all elements which are "readonly". In this demonstration, the selector selects and styles only if the input element is "readonly":
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
input:-moz-read-only { /* For Firefox */ background-color: yellow; } input:read-only { background-color: yellow; } </style> <body> <h3>A demonstration of the :read-only 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 a "readonly" attribute.</p> </body> |
A demonstration of the :read-only selector.A normal input element: A readonly input element: The :read-only selector selects form elements with a "readonly" attribute. |
Note: Firefox supports an alternative, the :-moz-read-only property. The :read-only selector is not supported in Internet Explorer.
