Skip to content
Related Articles

Related Articles

Improve Article
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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :