:disabled

The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the disabled attribute. It is defined in the CSS Selectors Level 3 spec as a “UI element state pseudo-class”, meaning it is used to style content based on the user's interaction with an input element.

Elements that can receive the disabled attribute include <button>, <input>, <textarea>, <optgroup>, <option> and <fieldset>. There are two valid syntaxes for setting this attribute: either disabled="disabled" or (in HTML5) simply the disabled Boolean keyword. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus.

Such an element can be styled using the :disabled pseudo-class selector:

Check out this Pen!

Points of Interest

  • :disabled can be “chained” with other pseudo-selectors: like :before or :after to generate icons or text to provide more user feedback.
  • Any property that can be animated with CSS Transitions or Animations will be properly animated when the disabled attribute is added or removed from the HTML element.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
All 3.1 All 9 9 All All

Comments

  1. User Avatar
    ram
    Permalink to comment#

    There is no description about this?

  2. User Avatar
    nandu
    Permalink to comment#

    Hi,
    I would like to change the text color of disabled control select(dropdown list). Specially for ie 10 and 11. how can i do that..The one text color should be in red in below code.

    sample code

    One
    Two
    Three

  3. User Avatar
    dfg
    Permalink to comment#

    fdghfdg

  4. User Avatar
    s
    Permalink to comment#

    ssss

  5. User Avatar
    asdasda
    Permalink to comment#

    Hola vengo a comentar. Bueno chau

  6. User Avatar
    irth
    Permalink to comment#

    This isn’t working in my angular app that has ng-disabled set, fwiw

    • User Avatar
      richard
      Permalink to comment#

      Seems to work fine for my angular application, for example:

      select option:disabled { background-color:#ddd; }

  7. User Avatar
    Davide Rizzo
    Permalink to comment#

    Note that the :before and :after pseudo classes will not work on an <input/> because it is a self closing tag and cannot contain other element (even pseudo ones).

  8. User Avatar
    Paco
    Permalink to comment#

    for example…
    .myclass:disabled { background-color:#7c6a58; }

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag