:disabled
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
La pseudo-clase :disabled de CSS 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.
css
/* Selecciona cualquier <input> deshabilitado */
input:disabled {
background: #ccc;
}
Sintaxis
Error: could not find syntax for this itemEjemplo
Este ejemplo muestra un formulario de envío básico. Utiliza el evento JavaScript change para permitir al usuario habilitar / deshabilitar los campos de facturación.
HTML
html
<form action="#">
<fieldset id="shipping">
<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>
<br />
<fieldset id="billing">
<legend>Dirección de facturación</legend>
<label for="billing_is_shipping">Igual que la dirección de envío:</label>
<input type="checkbox" id="billing-checkbox" 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>
CSS
css
input[type="text"]:disabled {
background: #ccc;
}
JavaScript
js
// Esperar a que la página termine de cargarse
document.addEventListener(
"DOMContentLoaded",
function () {
// Adjunte el detector de eventos `change` al checkbox
document.getElementById("billing-checkbox").onchange = toggleBilling;
},
false,
);
function toggleBilling() {
// Seleccione los campos de texto de facturación
var billingItems = document.querySelectorAll('#billing input[type="text"]');
// Alternar los campos de texto de facturación
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}
Resultado
Especificaciones
| Specification |
|---|
| HTML # selector-disabled |
| Selectors Level 4 # disabled-pseudo |
Compatibilidad con navegadores
Loading…