: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

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: