CSS :enabled and :disabled Pseudo-classes
The :enabled and :disabled pseudo-classes represent user interface elements (like form inputs) that are in an enabled or disabled state.
1. :enabled
The :enabled pseudo-class represents any element that can be enabled or disabled and is currently enabled.
- An element is enabled if it can be activated (e.g., selected, clicked on, typed into) or accept focus.
- This is the default state for most form elements.
/* Style all enabled inputs */
input:enabled {
background-color: white;
}2. :disabled
The :disabled pseudo-class represents any element that can be enabled or disabled and is currently disabled.
- An element is disabled if it cannot be activated (e.g., selected, clicked on, typed into) or accept focus.
- Disabled elements are usually rendered with a "grayed-out" look by the browser.
- Important: Values of disabled form elements are not submitted with the form.
/* Style all disabled inputs */
input:disabled {
background-color: <a href='/?search=%23f0f0f0' class='obsidian-tag'>#f0f0f0</a>;
color: #888;
cursor: not-allowed;
border: 1px solid <a href='/?search=%23ccc' class='obsidian-tag'>#ccc</a>;
}3. Applicable Elements
These pseudo-classes apply to elements that support the disabled attribute:
<button><input><textarea><select><optgroup><option><fieldset>
4. :disabled vs. [readonly]
It is important to distinguish between disabled and read-only states.
- Disabled (
:disabled):- Cannot be focused.
- Cannot be modified.
- Value is not submitted.
- Often removed from the tab order.
- Read-only (
:read-only/[readonly]):- Can be focused.
- Cannot be modified.
- Value is submitted.
- User can still select/copy text.
programming/css/css programming/css/pseudo-classes-and-pseudo-elements programming/css/selectors