Pure CSS Form Read-Only Inputs

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.

Output: 

👁 Image

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.

Output: 

Note: The disabled attribute is also like readonly but, the only difference is we can't do any interaction with the content of the field.

Reference: https://pure-css.github.io/#read-only-inputs