Definition and Usage
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:
1 |
input[type= "text" ]:disabled { background : #ccc ; } |
applied to this HTML5 fragment:
03 |
< legend >Shipping address</ legend > |
04 |
< input type = "text" name = "shipping_firstName" disabled> |
05 |
< input type = "text" name = "shipping_lastName" disabled> |
06 |
< input type = "text" name = "shipping_address1" disabled> |
07 |
< input type = "text" name = "shipping_address2" disabled> |
08 |
< input type = "text" name = "shipping_zipCode" disabled> |
09 |
< input type = "text" name = "shipping_town" disabled> |
12 |
< legend >Billing address</ legend > |
14 |
< input type = "checkbox" name = "billing_is_shipping" value = "true" checked> |
15 |
Billing address is the same as shipping address |
17 |
< input type = "text" name = "billing_firstName" disabled> |
18 |
< input type = "text" name = "billing_lastName" disabled> |
19 |
< input type = "text" name = "billing_address1" disabled> |
20 |
< input type = "text" name = "billing_address2" disabled> |
21 |
< input type = "text" name = "billing_zipCode" disabled> |
22 |
< input type = "text" name = "billing_town" disabled> |
Will result in all text elements in the billing fieldset having a light grey background.
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
Basic support |
1.0 |
1.0 (1.7 or earlier) |
9.0 |
9.0 |
3.1 |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
Basic support |
2.1 |
1.0 (1) |
9.0 |
9.5 |
3.1 |