You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
La pseudo-class CSS :disabled
representa qualsevol element deshabilitat. Un element queda deshabilitat si no es pot activar (seleccionar, fer clic, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat habilitat, en el qual es pot activar o acceptar l'enfocament.
/* Selecciona qualsevol <input> deshabilitat */ input:disabled { background: #ccc; }
Sintaxi
:disabled
Exemple
Aquest exemple mostra un formulari d'enviament bàsic. Utilitza l'esdeveniment JavaScript change
per permetre que l'usuari habiliti/deshabiliti els camps de facturació.
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_is_shipping">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; } }
Resultat
Especificacions
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of ':disabled' in that specification. |
Living Standard | Sense canvis |
HTML5 The definition of ':disabled' in that specification. |
Recommendation | Defineix la semàntica d'HTML i els formularis. |
Selectors Level 4 The definition of ':disabled' in that specification. |
Working Draft | Sense canvis |
CSS Basic User Interface Module Level 3 The definition of ':disabled' in that specification. |
Recommendation | Enllaços a Selectors Nivell 3 |
Selectors Level 3 The definition of ':disabled' in that specification. |
Recommendation | Defineix la pseudo-class, però no la semàntica associada. |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 3.1 |
Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Suport bàsic | 2.1 | (Yes) | 1.0 (1) | 9.0 | 9.5 | 3.1 |
[1] Internet Explorer no reconeix :disabled
en l'element <fieldset>
.