:disabled

  • Revision slug: CSS/:disabled
  • Revision title: :disabled
  • Revision id: 294074
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

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

Examples

Example selectors

input:disabled
Selects all disabled inputs
select.country:disabled
Targets a select element with class country that is disabled

Usage example

The following CSS:

.input[type="text"]:disabled { background: #ccc; }

applied to this HTML5 fragment:

<form action="#">
  <fieldset>
    <legend>Shipping address</legend>
    <input type="text" name="shipping_firstName" disabled>
    <input type="text" name="shipping_lastName" disabled>
    <input type="text" name="shipping_address1" disabled>
    <input type="text" name="shipping_address2" disabled>
    <input type="text" name="shipping_zipCode" disabled>
    <input type="text" name="shipping_town" disabled>
  </fieldset>
  <fieldset>
    <legend>Billing address</legend>
    <label>
      <input type="checkbox" name="billing_is_shipping" value="true" checked> 
      Billing address is the same as shipping address
    </label>
    <input type="text" name="billing_firstName" disabled>
    <input type="text" name="billing_lastName" disabled>
    <input type="text" name="billing_address1" disabled>
    <input type="text" name="billing_address2" disabled>
    <input type="text" name="billing_zipCode" disabled>
    <input type="text" name="billing_town" disabled>
  </fieldset>
</form>

Will result in all text elements in the billing fieldset having a light grey background.

Specifications

Specification Status Comment
{{ SpecName('HTML WHATWG', '#selector-disabled', ':disabled') }} {{ Spec2('HTML WHATWG') }} No change.
{{ SpecName('HTML5 W3C', '#selector-disabled', ':disabled') }} {{ Spec2('HTML5 W3C') }} Defines the semantic regarding HTML and forms.
{{ SpecName('CSS4 Selectors', '#enableddisabled', ':disabled') }} {{ Spec2('CSS4 Selectors') }} No change.
{{ SpecName('CSS3 UI', '#pseudo-classes', ':disabled') }} {{ Spec2('CSS3 UI') }} Link to Selectors Level 3.
{{ SpecName('CSS3 Selectors', '#enableddisabled', ':disabled') }} {{ 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

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>:disabled</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.</p>
<h2 id="Examples">Examples</h2>
<h3 id="Example_selectors">Example selectors</h3>
<dl>
  <dt>
    input:disabled</dt>
  <dd>
    Selects all disabled inputs</dd>
  <dt>
    select.country:disabled</dt>
  <dd>
    Targets a select element with class country that is disabled</dd>
</dl>
<h3 id="Usage_example">Usage example</h3>
<p>The following CSS:</p>
<pre class="brush: css">
.input[type="text"]:disabled { background: #ccc; }
</pre>
<p>applied to this HTML5 fragment:</p>
<pre class="brush: html">
&lt;form action="#"&gt;
&nbsp;&nbsp;&lt;fieldset&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Shipping address&lt;/legend&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="shipping_firstName" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="shipping_lastName" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="shipping_address1" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="shipping_address2" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="shipping_zipCode" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="shipping_town" disabled&gt;
&nbsp;&nbsp;&lt;/fieldset&gt;
&nbsp;&nbsp;&lt;fieldset&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Billing address&lt;/legend&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="checkbox" name="billing_is_shipping" value="true" checked&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Billing address is the same as shipping address
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="billing_firstName" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="billing_lastName" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="billing_address1" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="billing_address2" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="billing_zipCode" disabled&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" name="billing_town" disabled&gt;
&nbsp;&nbsp;&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
<p>Will result in all text elements in the billing fieldset having a light grey background.</p>
<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-disabled', ':disabled') }}</td>
      <td>{{ Spec2('HTML WHATWG') }}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('HTML5 W3C', '#selector-disabled', ':disabled') }}</td>
      <td>{{ Spec2('HTML5 W3C') }}</td>
      <td>Defines the semantic regarding HTML and forms.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#enableddisabled', ':disabled') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 UI', '#pseudo-classes', ':disabled') }}</td>
      <td>{{ Spec2('CSS3 UI') }}</td>
      <td>Link to Selectors Level 3.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Selectors', '#enableddisabled', ':disabled') }}</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/:enabled" title="En/CSS/:enabled">:enabled</a></li>
</ul>
Revert to this revision