Detailed explanation of HTML's <input> tag and how to disable it

Definition and Usage
The <input> tag is used to collect user information.
Depending on the value of the type attribute, the input field can have many forms. Input fields can be text fields, check boxes, masked text controls, radio buttons, buttons, and so on.
Differences between HTML and XHTML
In HTML, the <input> tag has no closing tag.
In XHTML, <input> tags must be properly closed.
Examples
A simple HTML form with two text input boxes and a submit button:

The disabled attribute specifies that the input element should be disabled.
A disabled input element is neither usable nor clickable. The disabled property can be set until some other condition is met (such as a checkbox being selected, etc.). Then, you need to use JavaScript to remove the disabled value and switch the value of the input element to enabled.

The following three ways can disable input

Disabled input is grayed out by default and can be styled using CSS. Note: IE9 and below cannot change the font color
1. Use CSS3 :disabled pseudo-element definition

2. Define using attribute selectors

3. Use class to define and add a class to the input to be disabled

Final result:

Note: IE8 bug
Since IE8 does not recognize :disabled, the input[disabled] and input:disabled styles are invalid. You can consider writing them separately or using input[disabled] directly. ; IE9 and below cannot change the font color.

Demo