How to Make the Text Input Non-Editable

In this snippet, you can find two ways of making the text of an <input> element non-editable. You can use either the readonly attribute on the <input> tag or add a little CSS.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solution with the HTML readonly attribute

The readonly attribute specifies that the value cannot be modified, although the user can still tab to it, highlight it, and copy the content.

Example of making the text input non-editable using the HTML readonly attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="text" value="W3docs" class="left field" readonly>
  </body>
</html>
The readonly attribute is valid only on the following input types: text, email, url, tel, number, password, date and time.

Solutions with the CSS pointer-events property

The second way of making the input text non-editable is using the CSS pointer-events property set to "none", which will stop the pointer-events.

Example of making the text input non-editable using the CSS pointer-events property:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      body {
        text-align: center;
      }
      .inputField {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    Non-Editable:
    <input class="inputField" name="input" value="W3docs">
    <br>
    <br> Non-Editable:
    <input class="inputField" name="input" value="Non editable input">
  </body>
</html>

In the example above, we have two <input> elements, and both of them are non-editable, whereas, in the next example, only one of the <input> elements is non-editable.

Example of making editable and non-editable text inputs with the CSS pointer-events property:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      body {
        text-align: center;
      }
      .input1 {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    Non-Editable:
    <input class="input1" name="input" value="W3docs">
    <br>
    <br> Editable:
    <input class="input2" name="input" value="W3docs">
  </body>
</html>