:disabled CSS Pseudo Class

The :disabled pseudo-class in CSS is used to target HTML elements that are in a disabled state, meaning they are not interactive or cannot be modified by the user. Typically, elements like input, button, select, and textarea can be disabled either through the presence of the disabled attribute in HTML or through JavaScript manipulation. Applying styles to these elements with :disabled allows designers to visually indicate to users that the element is inactive or unavailable.

For example, you can change the background color, cursor, or opacity to signify that a form field is disabled:

<form>
  <input type="text" placeholder="Enabled field">
  <input type="text" placeholder="Disabled field" disabled>
  <button>Enabled Button</button>
  <button disabled>Disabled Button</button>
</form>

input:disabled,
button:disabled {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
}

In this example, the :disabled pseudo-class targets the inputs and buttons that are disabled, applying a lighter background color, muted text, and a cursor style to visually communicate their inactive state.

The :disabled pseudo-class can also be combined with other pseudo-classes, such as :hover or :focus, to ensure that disabled elements do not respond to user interactions or styling intended for active elements. This makes it particularly useful for creating accessible and user-friendly forms, as it provides clear visual feedback while maintaining semantic meaning for assistive technologies.

Additionally, :disabled respects inheritance and specificity rules like other CSS selectors. If you want to style all disabled elements within a container, you could use a descendant selector:

form input:disabled {
  border-color: #ccc;
}

This approach ensures that your UI communicates effectively which elements are inactive while keeping your code maintainable and semantically correct.