:enabled

  • Revision slug: Web/CSS/:enabled
  • Revision title: :enabled
  • Revision id: 394273
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From CSS/:enabled to Web/CSS/:enabled

Revision Content

{{ CSSRef() }}

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:

{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}
Note that the color of the text on the button is also green, as the button is enabled too.
 

Specifications

Specification Status Comment
{{ SpecName('HTML WHATWG', '#selector-enabled', ':enabled') }} {{ Spec2('HTML WHATWG') }} No change.
{{ SpecName('HTML5 W3C', '#selector-enabled', ':enabled') }} {{ Spec2('HTML5 W3C') }} Defines the semantic regarding HTML and forms.
{{ SpecName('CSS4 Selectors', '#enableddisabled', ':enabled') }} {{ Spec2('CSS4 Selectors') }} No change.
{{ SpecName('CSS3 UI', '#pseudo-classes', ':enabled') }} {{ Spec2('CSS3 UI') }} Link to Selectors Level 3.
{{ SpecName('CSS3 Selectors', '#enableddisabled', ':enabled') }} {{ Spec2('CSS3 Selectors') }} Defines the pseudo-class, but not the associated semantic.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatGeckoMobile("1") }} 9.0 9.5 3.1

See also

{{ languages( { "fr": "fr/CSS/:enabled" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>:enabled</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> 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.</p>
<h2 id="Example">Example</h2>
<p>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.</p>
<div id="Enabled_Disabled_Inputs_Example">
  <p>The following HTML...</p>
  <pre class="brush:html">
    &lt;form action="url_of_form"&gt;
      &lt;label for="FirstField"&gt;First field (enabled):&lt;/label&gt; &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br /&gt;
      &lt;label for="SecondField"&gt;Second field (disabled):&lt;/label&gt; &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br /&gt;
      &lt;input type="submit" value="Submit" /&gt;
    &lt;/form&gt;
  </pre>
  <p>...used with this CSS...</p>
  <pre class="brush:css; highlight:[1,4]">
    input:enabled {
      color: #22AA22;
    }
    input:disabled {
      color: #D9D9D9;
    }
  </pre>
  <p>...will result in:</p>
  <div>
    {{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}</div>
  <div>
    Note that the color of the text on the button is also green, as the button is enabled too.</div>
  <div>
    &nbsp;</div>
</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('HTML WHATWG', '#selector-enabled', ':enabled') }}</td>
      <td>{{ Spec2('HTML WHATWG') }}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('HTML5 W3C', '#selector-enabled', ':enabled') }}</td>
      <td>{{ Spec2('HTML5 W3C') }}</td>
      <td>Defines the semantic regarding HTML and forms.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#enableddisabled', ':enabled') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 UI', '#pseudo-classes', ':enabled') }}</td>
      <td>{{ Spec2('CSS3 UI') }}</td>
      <td>Link to Selectors Level 3.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Selectors', '#enableddisabled', ':enabled') }}</td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td>Defines the pseudo-class, but not the associated semantic.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>9.0</td>
        <td>9.0</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>3.1</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/En/CSS/:disabled" title="En/CSS/:disabled">:disabled</a></li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/:enabled" } ) }}</p>
Revert to this revision