How to make text input non-editable using CSS?
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:
Please Login to comment...