:disabled CSS Pseudo Class

Description

The :disabled pseudo-class in CSS is used to target and style HTML elements that are in a disabled state. This state typically applies to form elements such as input fields, buttons, and checkboxes when they have been deactivated or made uneditable by a user or through scripting.

You can use the :disabled pseudo-class to apply specific styles to these disabled elements, making it visually clear that they are inactive or unavailable for interaction. For example, you might change the text color, background color, or opacity to distinguish disabled elements from active ones.

Here's a simple example of CSS code using the :disabled pseudo-class:

button:disabled {
background-color: #ccc;
color: #888;
cursor: not-allowed;
}

In this example, the CSS rules target disabled buttons and change their background color to light gray, text color to a slightly darker gray, and set the cursor to "not-allowed" to indicate that the button cannot be clicked.

The :disabled pseudo-class is particularly useful for enhancing user experience by providing clear visual feedback when certain form elements are inactive or unavailable.

Syntax

:disabled {
  /* ... */
}

Example

 <form>
<textarea disabled cols="30" rows="5">This is a disabled textarea, you can not enter any text here.</textarea>
</form>
textarea:disabled { 
border: 1px dashed #666;
padding: 5px;
font-style: italic;
}

Browser Support

The following table will show you the current browser support for the CSS :disabled pseudo class.

Desktop
Edge Chrome Firefox Opera Safari
121193.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1212

Last updated by CSSPortal on: 1st October 2023