Jobs Hub

CSS :read-only

The CSS :read-only pseudo-class is used when we need to select and style an element with READONLY attribute. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      input:read-only {background-color: #ccc;}
   </style>
</head>
<body>

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

Password:

Country:

The third element, right after Country:, is read-only, means we can not enter/type anything inside this field.

CSS Online Test

« Previous Tutorial Next Tutorial »