:disabled

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:disabledChrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes Edge does not recognize :disabled on the <fieldset> element.
Firefox Full support 1IE Full support 9
Notes
Full support 9
Notes
Notes Internet Explorer does not recognize :disabled on the <fieldset> element.
Opera Full support 9Safari Full support 3.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Veja também