A pseudo-classe CSS :disabled
representa qualquer elemento desativado. Um elemento é desativado se não puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado habilitado, no qual ele pode ser ativado ou aceitar o foco.
/* Selects any disabled <input> */
input:disabled {
background: #ccc;
}
Sintaxe
:disabled
Exemplo
Este exemplo mostra um formulário básico de envio. Ele usa o evento JavaScript change
para permitir que o usuário ative / desative os campos de faturamento.
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;
}
}
Resultado
Expecificações
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':disabled' in that specification. |
Padrão em tempo real | No change. |
HTML5 The definition of ':disabled' in that specification. |
Recomendação | Defines the semantics of HTML and forms. |
Selectors Level 4 The definition of ':disabled' in that specification. |
Rascunho atual | No change. |
CSS Basic User Interface Module Level 3 The definition of ':disabled' in that specification. |
Recomendação | Links to Selectors Level 3. |
Selectors Level 3 The definition of ':disabled' in that specification. |
Recomendação | Defines the pseudo-class, but not the associated semantics. |
Compatibilidades entre navegadores
BCD tables only load in the browser
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.