:read-only pseudo-class
Applies one or more styles to specified input fields when the fields are read-only.
Syntax
selector:read-only {...}Parameters
- selector
-
A CSS simple selector.
Standards information
- HTML 5.1, Section 4.15.2
Remarks
A field will be read-only compatible so long as the field is made read-only. A field that is editable will not have styles applied to it.
Examples
The following example creates a text field. The read-only selector in this situation would only make the background of the text field pink if the box was made read-only. Since the text field is set to read-only, the background color will be applied.
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
input:read-only { background: #ff00ff; }
</style>
</head>
<body>
<form action="" id="numBox">
<p>
<label for="input">If the field is read-only, the text box will be pink</label>
<input id="input" type="text" value = "You can only read this" readonly/>
</p>
</form>
</body>
</html>
See also
- Related pseudo-classes
- :read-write
Show: