This content originally appeared on DEV Community and was authored by Kavindu Santhusa
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
requiredattribute is not permitted on inputs with thedisabledattribute 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 💖💖💖.
This content originally appeared on DEV Community and was authored by Kavindu Santhusa
Kavindu Santhusa | Sciencx (2021-10-18T08:11:52+00:00) 5 lines of CSS style for disabled elements.(from Material Design). Retrieved from https://www.scien.cx/2021/10/18/5-lines-of-css-style-for-disabled-elements-from-material-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.