:disabled

Resumen

La  CSS pseudo-class :disabled representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado ( por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.

Ejemplos

Ejemplos de selectores

input:disabled
Selecciona todos los elementos input deshabilitados.
select.country:disabled
Selecciona un elemento select, con la clase country y que además esté deshabilitado.

Ejemplo de Uso

El siguiente CSS

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

Aplicado a un fragmento HTML5:

<form action="#">
  <fieldset>
    <legend>Dirección de envío</legend>
    <input type="text" placeholder="Nombre">
    <input type="text" placeholder="Dirección">
    <input type="text" placeholder="Código postal">
  </fieldset>
  <fieldset id="billing">
    <legend>Dirección de facturación</legend>
    <label for="billing_is_shipping">Lo mismo que la dirección de envío:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
    <br />
    <input type="text" placeholder="Nombre" disabled>
    <input type="text" placeholder="Dirección" disabled>
    <input type="text" placeholder="Código Postal" disabled>
  </fieldset>
</form>

Con un poco 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;
  }
}

El resultado mostrara todo los elementos del fieldset de facturación deshabilitados y con un fondo ligeramente gris.

Especificaciones

Especificación Estado Comentario
WHATWG HTML Living Standard
The definition of ':disabled' in that specification.
Living Standard Sin cambio
HTML5
The definition of ':disabled' in that specification.
Recommendation Define la semántica referente a HTML y los formularios.
Selectors Level 4
The definition of ':disabled' in that specification.
Working Draft Sin cambio.
CSS Basic User Interface Module Level 3
The definition of ':disabled' in that specification.
Candidate Recommendation Referencia a los selectores de Nivel 3.
Selectors Level 3
The definition of ':disabled' in that specification.
Recommendation Define la pseudo clase pero no la semántica asociada..

Compatibilidad con los distintos navegadores.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 2.1 1.0 (1) 9.0 9.5 3.1

Ver además

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,