Pure CSS Form Read-Only Inputs

Last Updated : 06 Dec, 2022

Readonly is a one of the attributes of <input> element in Pure CSS Forms. It is used to make the input field in a form read-only i.e., we can't modify the existing content inside the input field whether it is empty or non-empty. The name itself explains the attribute, it makes the input field only readable to the user. t restricts the user from modifying the content present inside the <input> text field, but, user interaction like selecting, copying the content can be performed.

Pure CSS Form Read-Only Inputs Class: There is no class for that we have a predefined attribute that can make any input field read-only and that attribute is readonly=" " with empty value.

Syntax:

<form class="pure-form">  
   <input type="..." 
          value="..." readonly="">  
</form>

Below example illustrate the Pure CSS Form Read-Only Inputs

Example 1: In this example, we will see How to find the input field is read-only. The content inside the input field which will be made to read-only will be grayed. The below example shows the word geeksforgeeks can't be modified and it is grayed, but we can do interactions like selecting the text.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>read-only</title>
    <!-- Import Pure CSS files -->
    <link rel="stylesheet" 
          href=
"https://unpkg.com/[email protected]/build/pure-min.css"
          integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
          crossorigin="anonymous">
</head>

<body>
    <h1>Geeksforgeeks</h1>
    <strong>Pure CSS Forms Read-Only Inputs</strong>
    <br><br>
    <form class="pure-form">
        <!-- read-only Input -->
        <label>GeeksforGeeks:
          <input type="text" 
                 value="A Computer Science Portal" 
                 readonly />
        <label>
    </form>
</body>

</html>

Output:

Example 2: In this example, we will Where we can use it. It can be used in the condition that the text inside the text-field should not be changed i.e., it should have a default value. The below example shows that the from(Mumbai) and to(Agra) place can't be edited for particular Train(Train A) because the Train A only takes the passengers who are originating from Mumbai and destined to Agra. The input tag with value Mumbai and Agra are added with attributes read-only at the last of the input field to make it read-only. You can find that they are grayed.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Import Pure CSS files -->
    <title>read-only</title>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/[email protected]/build/pure-min.css"
          integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
          crossorigin="anonymous">
</head>

<body>
    <h1>Geeksforgeeks</h1>
    <strong>Pure CSS Forms Read-Only Inputs</strong>
    <form class="pure-form pure-form-aligned">
        <fieldset>
            <div class="pure-control-group pure-controls">
                <strong>Train A</strong><br>
                <label for="name">
                  Passenger full-name
                </label>
                <input type="text" 
                       class="pure-input" 
                       id="name" />
                <br>
                <label for="from">From</label>
                <!-- To make the input field read-only -->
                <input type="text" 
                       class="pure-input"
                       id="from" 
                       value="Mumbai" 
                       readonly />
                <br>
                <label for="to">To</label>
                <input type="text" 
                       class="pure-input" 
                       id="to" 
                       value="Agra"
                       readonly />
                <br>
                <input type="button" 
                       class="pure-button pure-button-primary"
                       value="Submit">
            </div>
        </fieldset>
    </form>
</body>

</html>