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; }
:disabled
This example shows a basic shipping form. It uses the JavaScript change
event to let the user enable/disable the billing fields.
<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>
input[type="text"]:disabled { background: #ccc; }
// 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; } }
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. |
CSS Basic User Interface Module Level 3 The definition of ':disabled' in that specification. | Recommendation | Links to Selectors Level 3. |
Selectors Level 3 The definition of ':disabled' in that specification. | Recommendation | Defines the pseudo-class, but not the associated semantics. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | Yes | 1 | 9
|
9 | 3.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 2 | ? | Yes | 4 | 9.5 | 3.1 | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled