MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Compare Revisions

:disabled

Change Revisions

Revision 41249:

Revision 41249 by jswisher on

Revision 41250:

Revision 41250 by chevalric on

Title:
:disabled
:disabled
Slug:
CSS/:disabled
CSS/:disabled
Tags:
css, "CSS Reference", Selectors
css, "CSS Reference", Selectors
Content:

Revision 41249
Revision 41250
tt9    </p>
10    <h3>
11      Summary
12    </h3>
13    <p>
14      This selector targets disabled elements. An element is disa
 >bled if it can't be activated (e.g. selected, clicked on or accep
 >t text input) or accept focus. The element also has an enabled st
 >ate, in which it can be activated or accept focus.
15    </p>
16    <h3>
17      Examples
18    </h3>
19    <h4>
20      Example selectors
21    </h4>
22    <dl>
23      <dt>
24        input:disabled
25      </dt>
26      <dd>
27        Selects all disabled inputs
28      </dd>
29      <dt>
30        select.country:disabled
31      </dt>
32      <dd>
33        Targets a select element with class country that is disab
 >led
34      </dd>
35    </dl>
36    <h4>
37      Usage example
38    </h4>
39    <p>
40      The following CSS:
41    </p>
42    <pre>
43<code>.input[type="text"]:disabled {background:#ccc}</code>
44</pre>
45    <p>
46      applied to this HTML5 fragment:
47    </p>
48    <pre>
49&lt;form action="#"&gt;
50  &lt;fieldset&gt;
51    &lt;legend&gt;Shipping address&lt;/legend&gt;
52    &lt;input type="text" name="shipping_firstName" disabled&gt;
53    &lt;input type="text" name="shipping_lastName" disabled&gt;
54    &lt;input type="text" name="shipping_address1" disabled&gt;
55    &lt;input type="text" name="shipping_address2" disabled&gt;
56    &lt;input type="text" name="shipping_zipCode" disabled&gt;
57    &lt;input type="text" name="shipping_town" disabled&gt;
58  &lt;/fieldset&gt;
59  &lt;fieldset&gt;
60    &lt;legend&gt;Billing address&lt;/legend&gt;
61    &lt;label&gt;
62      &lt;input type="checkbox" name="billing_is_shipping" value=
 >"true" checked&gt; 
63      Billing address is the same as shipping address
64    &lt;/label&gt;
65    &lt;input type="text" name="billing_firstName" disabled&gt;
66    &lt;input type="text" name="billing_lastName" disabled&gt;
67    &lt;input type="text" name="billing_address1" disabled&gt;
68    &lt;input type="text" name="billing_address2" disabled&gt;
69    &lt;input type="text" name="billing_zipCode" disabled&gt;
70    &lt;input type="text" name="billing_town" disabled&gt;
71  &lt;/fieldset&gt;
72&lt;/form&gt;<br>
73</pre>
74    <p>
75      Will result in all text elements in the billing fieldset ha
 >ving a light grey background.

Back to History