Solución:
Puede hacer que un área de texto parezca deshabilitada, pero en realidad no puede deshabilitarla.
Al usar JavaScript, todo lo que realmente está haciendo es modificar el mismo atributo DOM que establece el HTML disabled atributo, por lo que utilizando HTML y JavaScript está esencialmente haciendo lo mismo. CSS, sin embargo, está completamente fuera de esta imagen, ya que no realiza manipulación DOM de ningún tipo; todo lo que controla es la apariencia (visual o de otro tipo) de un elemento, no su comportamiento.
En un proyecto, tengo un contenedor con un área de texto y algunos botones dentro. Para deshabilitar todo, le agrego una clase con el siguiente código:
.disabled {
opacity: 0.3;
}
.disabled:after {
width: 100%;
height: 100%;
position: absolute;
}
<div class="disabled">
<textarea></textarea>
<!-- textarea, buttons and other input elements -->
</div>
Si bien la opacidad es solo para el espectáculo, el elemento: after está haciendo el trabajo. Todos los elementos en el contenedor ya no reaccionan al hacer clic y pasar el mouse (aunque llegar a ellos con el tabulador seguirá funcionando). Para mis necesidades y en mi caso, esto funciona bien y es un truco css fácil.
CSS se ocupa de los estilos. Deshabilitar un elemento es funcional.
Por supuesto, CSS se está volviendo más funcional con cosas como las transiciones y eso es más un área gris. Pero el propósito de CSS es mantenerlo como estilos y no controlar el control funcional del elemento.
No, css no puede deshabilitar elementos.
Puede “simular” un control deshabilitado dándole un estilo para que parezca deshabilitado visualmente.