:disabled

Sumari

La pseudo-classe CSS :disabled representa qualsevol element deshabilitat. Un element es desactiva si no pot ser activat (per exemple seleccionat, fent clic o acceptar l'entrada de text) o acceptar el focus. L'element també té un estat activat, en el qual es pot activar o acceptar el enfocament.

Sintaxi

:disabled { style properties }

Exaemples

Exemple de selectors

input:disabled

Selecciona tots els inputs inhabilitats

select.country:disabled

Apunta a un element select amb una classe country que està inhabilitada

Example d'ùs

El següent CSS:

input[type="text"]:disabled { background: #ccc; }

Aplicat a aquest fragment HTML 5:

<form action="#">
  <fieldset>
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing_is_shipping">Same as shipping address:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
    <br />
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

Amb una mica de javascript:

function toggleBilling() {
  var billingItems = document.querySelectorAll('#billing input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

Donarà com resultat tots els elements de text inhabilitats del conjunt de camps de la pàgina de facturació amb un fons gris clar.

Especificacions

Navegadors compatibles

Veure

• :enabled