CSS :disabled

The :disabled selector in CSS is used to select and style HTML elements that are disabled. Disabled elements are those that cannot be interacted with or modified by the user, such as disabled input fields or buttons.

To apply styles to disabled elements in your CSS, you can use the :disabled selector followed by the desired styling properties. This selector is particularly useful for indicating to users that certain form fields are disabled and cannot be edited or submitted.

Here is an example of how to use the :disabled selector in CSS:

Result:


input:disabled {
  background-color: #f2f2f2;
  color: #999;
}

In this example, the :disabled selector is used to apply a light gray background color and a gray text color to disabled input fields.

Here is how the code above would look when applied to an input field:

Result:

As you can see, the input field is now styled with a light gray background color and gray text color to indicate that it is disabled.