CSS :read-write

The CSS :read-write pseudo-class is used when we need to apply styles to all FORM ELEMENTs that do not have DISABLED and/or READONLY attributes. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      input:read-write {background-color: teal; color: white;}
   </style>
</head>
<body>

   <form>
      Username: <input type="text"><br/><br/>
      Password: <input type="password"><br/><br/>
      Email ID: <input type="email" disabled><br/><br/>
      Country: <input readonly value="Netherlands">
   </form>
   
</body>
</html>

Output

Username:

Password:

Email ID:

Country:

In the above example, the following CSS code:

input:read-write {background-color: teal; color: white;}

applies styles to all input fields that are both readable and writable, meaning that users can input text in these fields. Specifically, it sets the background color of these fields to teal and the text color to white.

In the "body" section of the document, there is a "form" element that includes four input fields for username, password, email ID, and country. These input fields have different attributes, such as type="text", type="password", type="email", disabled, and readonly. These attributes define the type and behavior of the input fields.

The type="text" attribute creates an input field that allows users to input text.

The type="password" attribute creates an input field that hides the entered text.

The type="email" attribute creates an input field that validates email addresses entered by the user.

The disabled attribute disables the input field, preventing users from editing the value.

The readonly attribute makes the input field read-only, allowing users to view but not edit the value.

Overall, the code creates a form with different types of input fields and applies a style to the readable and writable input fields using CSS.

Please keep in mind that FORM ELEMENTS with the DISABLED or READONLY attributes are not writable.

Note: A form element with the READONLY attribute looks writable.

Advantages of the :read-write pseudo-class in CSS

Allows you to style only the editable input fields while leaving non-editable fields alone.
Users are given a visual cue that certain input fields are editable and can be interacted with.
Can increase the usability and accessibility of web forms by making it clear which fields can and cannot be edited.

Disadvantages of the :read-write pseudo-class in CSS

Not supported in older browsers, which may limit your website's compatibility.
Using this pseudo-class to apply styles to a large number of input fields can slow down the performance of your website, especially on older devices or with slow internet connections.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!