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

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

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!