:read-only Archives - Lena Design

CSS :read-write and :read-only Selectors

CSS :read-write selector

The CSS :read-write selector matches form elements that are “readable” and “write-able”.

Form elements with no “read-only” attribute and non “disabled” attribute are specified as “read-” and “write-able”.

Syntax:

:read-write {
  CSS declarations;
}

CSS :read-only selector

The CSS :read-only selector matches elements that are “read-only”.

Form elements with a “read-only” attribute are specified as “read-only” (You can not input any new data).

Syntax:

:read-only {
  CSS declarations;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
  background-color: #e9c46a;
}
    
input:read-only {
  background-color: #f4a261;
}
</style>
</head>
<body>

<p>:read-write selector:<br><input value="text"></p>

<p>:read-only selector:<br><input readonly value="text"></p>

</body>
</html>

Output:

:read-write selector:

:read-only selector:

Enjoy coding!