W3docs
en
Log in

How to Disable Form Fields with CSS

In this tutorial, we’ll demonstrate how it is possible to disable form fields with some CSS. For that, you can use the pointer-events property set to “none”.

Tags

Solutions with the CSS pointer-events property

You can visually disable form fields by using CSS. To block mouse interactions, use the CSS pointer-events property set to none. Note that this method does not prevent form submission or keyboard navigation.

Now, we’ll demonstrate some examples.

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>
Try it Yourself »
Danger

In the next example, we use the <span class="attribute">tabindex</span> attribute with a negative value. This removes the field from the sequential tab order, but note that it does not prevent keyboard users from focusing the field via other means.

Example of disabling a form field with the <span class="attribute">tabindex</span> 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>
Try it Yourself »