CSS :read-only Selector

Posted in CSS Tutorial

Updated on Sep 18, 2024

By Mari Selvan

👁️ 4 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The :read-only selector in CSS is used to target form elements or content areas that are in a read-only state, meaning the user can view the content but cannot modify it.

This pseudo-class is particularly useful when you want to style elements that are not editable, enhancing the visual clarity of your web forms or content areas.

💡 Syntax

The signature of the :read-only Selector is as follows:

Syntax

Copied

:read-only {
    /* CSS properties */
}

The :read-only pseudo-class applies to elements such as <input>, <textarea>, and other form controls that can be set as read-only by adding the readonly attribute.

📝 Example

Here is an example of how to use the :read-only selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :read-only Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="readonlyField">Read-only Field:</label>
        <input type="text" id="readonlyField" value="This is read-only" readonly>
        
        <label for="editableField">Editable Field:</label>
        <input type="text" id="editableField" placeholder="You can edit this field">
    </form>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for read-only elements */
:read-only {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #999;
}

/* Style for editable elements */
:read-write {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}

In this example:

The read-only field has a gray background and text color, indicating that it cannot be modified.
The editable field has a white background and black text, making it clear to users that they can interact with it.

💬 Usage Tips

The :read-only selector works with elements that have the readonly attribute, such as <input> and <textarea>.
Use the :read-write selector in combination with :read-only to provide different styles for editable and non-editable elements.
You can make an element read-only dynamically using JavaScript by setting the readonly attribute on an element.

📝 Example (Using JavaScript)

Javascript

Copied

<script>
    document.getElementById('readonlyField').readOnly = true;
</script>

⚠️ Common Pitfalls

The :read-only selector does not apply to disabled elements (<input disabled>). For styling disabled elements, use the :disabled selector instead.
If you forget to add the readonly attribute to a form control, the :read-only selector won’t have any effect, as the element will remain editable.
Ensure that your styles are accessible, especially for users with visual impairments. Read-only fields should still be distinguishable and easy to read.

🎉 Conclusion

The :read-only selector is a valuable CSS tool for enhancing the visual presentation of non-editable form fields or content areas.

By styling read-only elements appropriately, you provide clear feedback to users about which parts of the page can be interacted with and which cannot. This selector plays an important role in creating intuitive and user-friendly interfaces.