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...