The :disabled
CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.
/* Selects any disabled <input> */ input:disabled { background: #ccc; }
Syntax
:disabled
Examples
This example shows a basic shipping form. It uses the JavaScript change
event to let the user enable/disable the billing fields.
HTML
<form action="#"> <fieldset id="shipping"> <legend>Shipping address</legend> <input type="text" placeholder="Name"> <input type="text" placeholder="Address"> <input type="text" placeholder="Zip Code"> </fieldset> <br> <fieldset id="billing"> <legend>Billing address</legend> <label for="billing-checkbox">Same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="Name" disabled> <input type="text" placeholder="Address" disabled> <input type="text" placeholder="Zip Code" disabled> </fieldset> </form>
CSS
input[type="text"]:disabled { background: #ccc; }
JavaScript
// Wait for the page to finish loading document.addEventListener('DOMContentLoaded', function () { // Attach `change` event listener to checkbox document.getElementById('billing-checkbox').onchange = toggleBilling; }, false); function toggleBilling() { // Select the billing text fields var billingItems = document.querySelectorAll('#billing input[type="text"]'); // Toggle the billing text fields for (var i = 0; i < billingItems.length; i++) { billingItems[i].disabled = !billingItems[i].disabled; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':disabled' in that specification. |
Living Standard | No change. |
HTML5 The definition of ':disabled' in that specification. |
Recommendation | Defines the semantics of HTML and forms. |
Selectors Level 4 The definition of ':disabled' in that specification. |
Working Draft | No change. |
Selectors Level 3 The definition of ':disabled' in that specification. |
Recommendation | Defines the pseudo-class, but not the associated semantics. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:disabled | Chrome Full support 1 | Edge
Full support
12
| Firefox Full support 1 | IE
Full support
9
| Opera Full support 9 | Safari Full support 3.1 | WebView Android Full support 2 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.