Open In App

CSS :read-only Selector

Last Updated : 29 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The :read-only selector is used to select an element that is readable only. The read-only is used to disable the fields. Mainly read-only pseudo-class represents 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>

Output:

  

Supported Browser: The browser supported by :read-only selector are listed below:

  • Google Chrome 1.0 and above
  • Edge 13.0 and above
  • Firefox 78.0 and above
  • Safari 4.0 and above
  • Opera 9.0 and above

S

Sabya_Samadder
Improve
Article Tags :

Explore

Lightbox