Jobs Hub

CSS :read-write

The CSS :read-write pseudo-class is used when we need to apply styles to all FORM ELEMENTs, that haven't DISABLED and/or READONLY attribute(s). 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:

Note - FORM ELEMENTs with DISABLED or READONLY attribute are not writable.

Note - FORM ELEMENT with READONLY attribute looks like writable.

CSS Online Test

« Previous Tutorial Next Tutorial »