CSS :disabled Selector

CSS :disabled selector is used to select and style disabled elements on a page. An element is treated as a disabled element if it has the disabled attribute. This attribute can be present in two ways: disabled=”disabled” or simply disabled.

The :disabled selector mostly works on the form elements like the buttons, inputs, checkboxes, textareas, etc.

The :disabled selector in the following example sets a lightgrey background to those inputs that have the disabled attribute:


    background: lightgrey;

You can also use the :disabled selector to select and style the disabled options of a dropdown. See this example:


   background-color: yellow;

CSS Syntax

The syntax of the :disabled selector is as follows:

   CSS Styles;

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :disabled selector.



  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.