How to disable form fields using CSS?

Spread the love

Sometimes, we want to disable form fields using CSS.

In this article, we’ll look at how to disable form fields using CSS.

How to disable form fields using CSS?

To disable form fields using CSS, we set the pointer-events style.

For instance, we write

<input type="text" name="username" value="admin" tabindex="-1" />

to add an input.

Then we write

input[name="username"] {
  pointer-events: none;
}

to select the input with the name attribute set to username.

And set set its style to pointer-events: none; to disable it.

We also set its tabindex to -1 so we can’t focus on it.

Conclusion

To disable form fields using CSS, we set the pointer-events style.

Leave a Reply

Your email address will not be published.