CSS Reference Manual

CSS @rules

Complete List of CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS :read-only selector

:read-only CSS pseudo-class to represent the state where the element cannot be edited by the user (such as a locked text input box).

Complete CSS Selector Reference Manual

Online Example

The input element with the "readonly" attribute set and the background color set to green-blue:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>/title>　
<style>
input { min-width:　25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }
p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }
</style>
</head>
<body>
<input type="text" value="Type anything you want here.">
<input type="text" value="Read-only." readonly>
<p>Normal paragraph.</p>/p>
<p contenteditable="true">Editable paragraph!</p>/p>
</body>
</html>

Test to see ‹/›

Definition and Usage

:read-The 'only' selector is used to select elements that have the 'readonly' attribute set.

Form elements can be set with the 'readonly' attribute to define elements as read-only.

Note: Currently, most browsers, :read-The 'only' selector is applicable to input and textarea elements, but it also applies to elements that have the 'readonly' attribute 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

/*　To select any read-only input elements and to be supported in Firefox, you need to add-moz prefix　*/
input:-moz-read-only {
　　background-color: #ccc;
}
input:read-only {
　　background-color: #ccc;
}

Note: This selector does not only select <input> elements with the 'readonly' attribute, it also selects all elements that cannot be edited by the user.

CSS Selector :read-write