An HTML form is a component of an HTML document frequently used to get user input. The HTML forms consist of components, such as input fields, login fields, checklists, radio buttons, a submit button, menus, and many more. However, in some scenarios, users want to disable or hide the input field to fulfill the prerequisite, like checking a box. In CSS, events can be disabled by utilizing the “disabled” and “pointer-events” properties.

This article will explain the methods for disabling the form field using CSS.

How to Disable Form Fields Using CSS?

To disable any form field in HTML, users can either utilize CSS property or the “disabled” attribute. For this purpose, we have listed the methods for disabling the form fields:

• Method 1: How to Disable Form Fields Using CSS “pointer-event” Property?
• Method 2: How to Disable Form Field Using “disabled” Attribute?

Method 1: How to Disable Form Fields Using CSS “pointer-event” Property?

To disable the form field using the CSS property, create a form using the given instructions.

• First, add an “<form>” element to create a form.
• Next, use the “<label>” element to embed the label in the form, and the “<input>” element will be used to specify form fields.
• The “for” attribute attached the label with the input field through “id”.
• The input type as “text” is used to set the text field in the form.
• The input type “submit” is utilized to add a button to the form.

For instance, we have created three different text fields and three buttons:

Disable the Form Field Through CSS
Now, disable the form field using CSS property. For instance, we will disable the form field whose input type is “number”. For this purpose, access the form field through “input[type=number]” and set the value of the CSS “pointer-events” property as “none” as follow:

From the below output, you can see that the “Enter your age” field is completely disabled:

Let’s move ahead toward the next section to disable the form field through the HTML attribute “disabled”.

Method 2: How to Disable Form Field Using “disabled” Attribute?

To disable the form field using the “disabled” attribute, go through the given instruction:

• Add the <form> element with the “content” class name to create a form:
• Adjust the form field according to the instruction discussed in the first section:
• Apply the “disabled” attribute to the form field which you want to disable. For instance, we will disable the “Next” button:

Output

Apply CSS to .content Class
“.content” class is utilized to access the form. In the “.content” class, set the property “padding” to add space around form fields:

Style input Element where “type=submit”

The above code will access the input element where type is equal to submit. Apply styling on selected fields by utilizing the below-mentioned properties:

• “width” is used to set the width of selected fields.
• “padding” is used to set space around the selected elements.
• The “background-color” property is utilized to set the background.
• “border-radius” property sets the edges of selected elements.

Style “disabled” Element

Style the element on which the “disabled” attribute is applied by using the multiple properties:

• “box-shadow” sets a shadow around the element.
• “border” property is used to set the border around the disabled element.

Output

We have provided the methods for disabling the form field using CSS.

Conclusion

To disable form fields using CSS, users can use the CSS property “pointer-events” or the HTML attribute “disabled”. To disable the form field, create a form, then set the CSS property “pointer-events” as “none” on a specific input type to disable it. However, users can directly use the “disabled” attribute on a specific form field to disable it. This post explained the method for disabling the form field using CSS.