CSS :read-write

The CSS :read-write pseudo-class targets form elements that are editable by the user. These include input fields and textareas that do not have the readonly or disabled attribute. This pseudo-class is useful for applying styles to elements that users can interact with and modify.

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

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

Where:

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

Examples

1. Styling Editable Input Fields

In this example, editable <input> fields are styled with a blue border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:read-write {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <form>
        <label>Editable Field:</label>
        <input type="text" placeholder="You can edit this"><br><br>
        <label>Read-Only Field:</label>
        <input type="text" placeholder="This is read-only" readonly>
    </form>
</body>
</html>

2. Styling Editable Textareas

Here, editable <textarea> elements are styled with a lightblue background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        textarea:read-write {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <textarea placeholder="You can edit this" rows="4" cols="30"></textarea><br><br>
    <textarea placeholder="This is read-only" rows="4" cols="30" readonly></textarea>
</body>
</html>

3. Styling Focused Editable Fields

In this example, editable fields gain a bold outline when focused.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:read-write:focus, textarea:read-write:focus {
            outline: 2px solid green;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Editable field"><br><br>
    <textarea placeholder="Editable textarea" rows="4" cols="30"></textarea>
</body>
</html>

4. Styling Editable Fields with Placeholder Text

Here, editable fields are styled with italic placeholder text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:read-write::placeholder, textarea:read-write::placeholder {
            font-style: italic;
            color: gray;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Editable placeholder"><br><br>
    <textarea placeholder="Editable textarea placeholder" rows="4" cols="30"></textarea>
</body>
</html>

5. Styling Both Editable and Read-Only Fields

In this example, editable fields are styled with a green border, while read-only fields are styled with a gray border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:read-write {
            border: 2px solid green;
        }

        input:read-only {
            border: 2px solid gray;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Editable field"><br><br>
    <input type="text" placeholder="Read-only field" readonly>
</body>
</html>