CSS :read-only

The CSS :read-only pseudo-class targets form elements that are in a read-only state. These elements cannot be modified by the user but can still be focused and selected. This pseudo-class is typically applied to input fields with the readonly attribute.

The syntax for the :read-only pseudo-class is:

</>
Copy
selector:read-only {
    property: value;
}

Where:

ParameterDescription
selectorThe form element (e.g., <input>, <textarea>) to which the :read-only pseudo-class will apply.
propertyThe CSS property to style the read-only element.
valueThe value assigned to the CSS property.

Examples

1. Styling Read-Only Input Fields

In this example, read-only <input> fields are styled with a gray background and italic text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:read-only {
            background-color: lightgray;
            font-style: italic;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <form>
        <label>Editable Field:</label>
        <input type="text" placeholder="Editable"><br><br>
        <label>Read-Only Field:</label>
        <input type="text" placeholder="Read-only" readonly>
    </form>
</body>
</html>

2. Styling Read-Only Textareas

Here, read-only <textarea> elements are styled with a lightyellow background and a gray border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        textarea:read-only {
            background-color: lightyellow;
            border: 1px solid gray;
            color: darkgray;
        }
    </style>
</head>
<body>
    <textarea placeholder="Editable textarea" rows="4" cols="30"></textarea><br><br>
    <textarea placeholder="Read-only textarea" rows="4" cols="30" readonly></textarea>
</body>
</html>

3. Styling Read-Only Select Dropdowns

In this example, read-only <select> elements are styled with a blue border and italic font.

Note: While the readonly attribute is not supported on <select> elements in HTML, you can achieve similar functionality using JavaScript or custom CSS classes to simulate a read-only style.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        select:read-only {
            border: 2px solid blue;
            font-style: italic;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <form>
        <label>Editable Dropdown:</label>
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
        </select><br><br>
        <label>Read-Only Dropdown:</label>
        <select class="read-only">
            <option>Option 1</option>
        </select>
    </form>
</body>
</html>

4. Styling Read-Only Fields with Hover Effects

Here, read-only fields are styled with a lighter background when hovered over to indicate their read-only status.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:read-only:hover, textarea:read-only:hover {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Editable field"><br><br>
        <input type="text" placeholder="Read-only field" readonly>
    </form>
</body>
</html>