How to Disable Form Fields with CSS

Solutions with the CSS pointer-events property

You can disable form fields by using some CSS. To disable form fields, use the CSS pointer-events property set to “none”.

Now, we’ll demonstrate some examples.

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

Example of disabling a form field:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[name=name] {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <input type="text" name="name" value="w3docs">
  </body>
</html>

In the next example, we use the tabindex attribute with a negative value. Note that this can help in some case; however, it does not prevent tabbing into the field.

Example of disabling a form field with the tabindex attribute:

 
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[name=name] {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <input type="text" name="name" value="w3docs" tabindex="-1">
  </body>
</html>