¿Puedo diseñar un control deshabilitado usando CSS o script?

Question

Tengo un elemento HTML div en una página que se actualiza cuando cambia un elemento select en la página. A veces, las etiquetas input (cuadros de texto) deben deshabilitarse en función de la selección.

Aquí está el problema: a los interesados ​​en el proyecto les gusta la funcionalidad, solo piensan en el estado "deshabilitado", el contenido del cuadro de texto es demasiado liviano y por lo tanto ilegible. ¿Puedo aplicar CSS a un control desactivado? O debería configurar los cuadros de texto al readonly y usar algún otro CSS. Esta aplicación también está usando jQuery, si eso ayuda. ¿Y ideas o sugerencias aquí?

Answer 1

La aplicación de CSS a un elemento no se ve afectada si el elemento está deshabilitado.

Answer 2

Yo los configuraría como de solo lectura, ya que aparentemente quiere que la gente los pueda leer, las personas también pueden querer seleccionar texto para copiar/pegar, y la selección también está deshabilitada cuando el cuadro de texto está discapacitado. Sin embargo, su CSS debería funcionar bien ya sea que el elemento esté desactivado o no.

Answer 3

Sí, puedes. En CSS:

input[disabled]{color:green} 

O jQuery:

$('input[disabled]').css('color','green'); 

ACTUALIZACIÓN: Esto sólo funciona en Gecko/WebKit.

Answer 4

Si tiene problemas con un estilo que no se puede sobrescribir en un elemento desactivado - Upper Stage señala que no hay límite en el estilo, y pensándolo bien puede estar en lo cierto - puede ser mejor darle a los controles una readonly atributo y "inhabilitarlo manualmente" usando onfocus='this.blur();'

Tenga en cuenta que esto no funcionará al 100% como un control deshabilitado: Su valor se enviará con el formulario.

Answer 5

input[type="submit"][disabled="disabled"] 
{ 
    /* CSS here */ 
} 
input[type="text"][disabled="disabled"] 
{ 
    /* CSS here */ 
} 
input[type="button"][disabled="disabled"] 
{ 
    /* CSS here */ 
} 

Trabaja en todos los navegadores si la etiqueta de entrada es algo así como:

<input type="submit" disabled="disabled"> 

y si quieres cambiarlo cuando no está desactivada, sólo tiene que añadir esto a tu CSS

input[type="submit"] 
{ 
    /* CSS here */ 
} 
input[type="text"] 
{ 
    /* CSS here */ 
} 
input[type="button"] 
{ 
    /* CSS here */ 
}