CSS :read-only Selector

Last Updated : 05 Jul, 2023

The :read-only selector is used to selecting that element which is readable only. The read-only is used to disable the fields. Mainly read-only pseudo-class represent an element that can’t be edited by the user.

Syntax:

:read-only {
    // CSS property
}

Example 1:

html

<!DOCTYPE html>
<html>
 
<head>
    <style>
        input:-moz-read-only {
            text-align: center;
            margin: 10px;
            padding: 5px;
            color: Green;
        }
 
        input:read-only {
            text-align: center;
            margin: 10px;
            padding: 5px;
            color: Green;
        }
 
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>Geeksforgeeks</h1>
    <h2>:read-only selector</h2>
    <p>Read contents only:<br>
        <input readonly value="GeeksforGeeks: 
        computer science portal">
    </p>
</body>
 
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>:read-only selector</title>
    <style>
        h1 {
            color: green;
        }
 
        input:read-only {
            background-color: Green;
            color: white;
            text-align: center;
        }
 
        input:-moz-read-only {
            background-color: Green;
            border: 1px solid black;
            border-radius: 4px;
            padding: 4px;
            color: white;
            text-align: center;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>:read-only Selector</h2>
    <input type="text"
           value="Editable Contents">
    <input type="text"
           value="Non-editable contents" readonly>
</body>
 
</html>