CSS
How to disable input with CSS?
In this article, we will demonstrate How to disable input with CSS.
When we have an input element on the screen there arises a need to disable the text input elements so that users will not be able to enter anything in that input text box. This can be done when applying some CSS code.
Once we apply this CSS then the input element will be displayed on the screen but it will not be in editable format, the user will not be able to enter anything in the text box although he can view the text element.
How to disable input with CSS?
To disable the input element we make use of CSS property pointer-events and set its value to none.
This CSS property will disable the element and the user will not be able to do anything in this text element.
This simple CSS property will force the input element to remain in a disabled format.
Additionally, we also apply a background color to the input element so that it will display visually to the user as disabled.
We can disable multiple input elements by creating a class and applying it to the required input element.
CSS :-
input.disabled {
pointer-events: none;
background: #f5f5f5;
}
HTML :-
<input class="disabled" type="text" name="input1" id="input1">
Output :-
In the CSS code syntax, we have created a class with input elements. In this class, we have created a property pointer-events and applied the value as none. Secondly, we have also given a background color so that the input will display in greyed out color format.
In HTML code, we have created an input element tag and it has been given the class disable.
In the output image, the text box can be seen in the disabled format whereas the color of the text box also looks greyed out. This text box is in disabled format and the user cannot enter anything in this input element.
Recap
We have come to the end of this article and we have learned so far CSS property pointer-events: none; that can be used to disable input element.
As we have seen in the practical demonstration how the textbox in the HTML document screen can be disabled so that the user cannot do anything about that in this text input.
