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.