:disabled
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
Error: could not find syntax for this item
Exemplo
Este exemplo mostra um formulário básico de envio. Ele usa o evento JavaScript change
(en-US) 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. |
Compatibilidade com navegadores
BCD tables only load in the browser