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 w3wiki 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/purecss@1.0.0/build/pure-min.css" integrity = "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin = "anonymous" > </ head > < body > < h1 >w3wiki</ h1 > < strong >Pure CSS Forms Read-Only Inputs</ strong > < br >< br > < form class = "pure-form" > <!-- read-only Input --> < label >w3wiki: < 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/purecss@1.0.0/build/pure-min.css" integrity = "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin = "anonymous" > </ head > < body > < h1 >w3wiki</ 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 > |
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://purecss.io/forms/#read-only-inputs
Contact Us