How does the :disabled pseudo-class behave?

Q: How does the :disabled pseudo-class behave?

The `:disabled` pseudo-class in CSS targets form elements that are currently disabled. Disabled elements cannot be interacted with by the user, such as ` `, ` `, ` `, and ` `. This pseudo-class allows you to style these elements differently to indicate their inactive state. /* Style disabled input fields */ input:disabled { background-color: #f0f0f0; color: #999; cursor: not-allowed; } /* Style disabled buttons */ button:disabled { background-color: lightgray; color: #666; cursor: not-allowed; } Enabled Button Disabled Button In this example, disabled inputs and buttons are visually distinct and indicate that they cannot be interacted with, improving user experience and accessibility. Use `:disabled` to style elements clearly when they cannot be interacted with. Combine with visual cues like color, opacity, and cursor changes for better UX. Do not rely solely on color to indicate disabled state; ensure sufficient contrast and other cues for accessibility. Test disabled styles across browsers, as form element styling can vary.

Difficulty: 4/10

pseudo-classes, form controls, accessibility

Understanding the :disabled Pseudo-Class

The :disabled pseudo-class in CSS targets form elements that are currently disabled. Disabled elements cannot be interacted with by the user, such as <input>, <button>, <select>, and <textarea>. This pseudo-class allows you to style these elements differently to indicate their inactive state.

Example: Using :disabled

In this example, disabled inputs and buttons are visually distinct and indicate that they cannot be interacted with, improving user experience and accessibility.

Best Practices

1
Use :disabled to style elements clearly when they cannot be interacted with.
2
Combine with visual cues like color, opacity, and cursor changes for better UX.
3
Do not rely solely on color to indicate disabled state; ensure sufficient contrast and other cues for accessibility.
4
Test disabled styles across browsers, as form element styling can vary.

Scenario Questions

0-2 years experience

Follow-up Questions