How to make text input non-editable using CSS?
Last Updated :
26 Feb, 2019
The read-only attribute in HTML is used to create a text input non-editable. But in case of CSS, the pointer-events property is used to stop the pointer events.
Syntax:
pointer-events: none;
Example 1: This example shows two input text, in which one is non-editable.
<!DOCTYPE html>
< html >
< head >
< title >
Disable Text Input field
</ title >
< style >
.inputClass {
pointer-events: none;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
Non-editable:< input class = "inputClass"
name = "input" value = "GeeksForGeeks" >
< br >< br >
Editable:< input class = "inputClass2"
name = "input" value = "GeeksForGeeks" >
</ body >
</ html >
|
Output:
Example 2: This example creates two input text, both of them are non-editable.
<!DOCTYPE html>
< html >
< head >
< title >
Disable Text Input field
</ title >
< style >
.inputClass {
pointer-events: none;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
Non-editable:< input class = "inputClass"
name = "input" value = "GeeksForGeeks" >
< br >< br >
Non-Editable:< input class = "inputClass"
name = "input" value = "GeeksForGeeks" >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...