5 lines of CSS style for disabled elements.(from Material Design)

If I are creating a form with HTML, sometimes I wanted to disable a text box for users. Here came the disabled attribute.

Disabled Controls

The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.

If the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.

Read only controls

What about read only controls.
The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

Required fields

What about required controls.
Because a disabled field cannot have its value changed, required does not have any effect on inputs with the disabled attribute also specified. Additionally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled.

Note: The required attribute is not permitted on inputs with the disabled attribute specified.

Material Design

Material Design is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

According to Material Design

A disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI. Disabled states are displayed at 38% opacity of the enabled state.

Disabled states can also indicate they are not interactive through color changes and reduced elevation.

The code

So here is the Materialized disabled CSS snippet

:disabled,
[disabled] {
  opacity: 0.38;
  pointer-events: none;
}

That's all. Enjoy it.
Follow me for more tricks.🏃‍♀️🏃‍♂️
Thanks 💖💖💖.