Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    :enabled

    Summary

    The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can't be activated or accept focus.

    Example

    The following will make the text color a medium green shade when enabled, and a gray shade when disabled. This allows for feedback to the user of which elements are interactable or not.

    The following HTML...

        <form action="url_of_form">
          <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
          <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
          <input type="submit" value="Submit" />
        </form>
      

    ...used with this CSS...

        input:enabled {
          color: #22AA22;
        }
        input:disabled {
          color: #D9D9D9;
        }
      

    ...will result in:

    Note that the color of the text on the button is also green, as the button is enabled too.

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    The definition of ':enabled' in that specification.
    Living Standard No change.
    HTML5
    The definition of ':enabled' in that specification.
    Recommendation Defines the semantic regarding HTML and forms.
    Selectors Level 4
    The definition of ':enabled' in that specification.
    Working Draft No change.
    CSS Basic User Interface Module Level 3
    The definition of ':enabled' in that specification.
    Working Draft Link to Selectors Level 3.
    Selectors Level 3
    The definition of ':enabled' in that specification.
    Recommendation Defines the pseudo-class, but not the associated semantic.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 1.0 (1) 9.0 9.5 3.1

    See also

    Document Tags and Contributors

    Last updated by: MusikAnimal,