2010-09-30 14 views
19

Uno de nuestros clientes tiene dificultades para leer el texto gris en los controles con discapacidad en nuestra aplicación basada en la web:Styling discapacitados <select> (cuadros desplegables) en HTML

IE9 example

Nos gustaría cambiar el estilo a un fondo gris claro y un texto negro. Desafortunadamente, la mayoría de los navegadores (incluido IE, que es lo que el cliente está usando) ignoran el atributo CSS color: ... en los controles deshabilitados, por lo que no podemos cambiar el color de primer plano.

Para cuadros de texto (input type="text"), esto puede solucionarse fácilmente utilizando el atributo readonly en lugar del disabled. Lamentablemente, esta no es una opción para los menús desplegables (select) ni las casillas de verificación (input type="checkbox").

¿Existe una solución fácil para eso? ¿Preferiblemente uno donde el control no necesita ser reemplazado por otro tipo de control? (... desde que nuestros controles son renderizados por ASP.NET)

PD: Usar el selector [disabled] en CSS no hace la diferencia.

+0

posible duplicado: http://stackoverflow.com/questions/679358/how-do-i-styling-disabled-select-dropdownlist-in-ie – Peter

+0

@Peter: La respuesta dada a la pregunta 679 358 no se aplica : No es un problema que el selector '[disabled]' no funcione. Es un problema de IE (incluidos 8, 9) que no permite anular el color del texto de los controles deshabilitados. – Heinzi

+7

Pida al cliente que apague el brillo de su monitor. – Kyle

Respuesta

26

En Internet Explorer 9, se añadió soporte para el :disabled pseudo-selector (ref). No sé si eso honrará la propiedad de "color", pero parece probable.

En versiones anteriores de IE, puede ajustar el color de fondo (pero no el color). Por lo tanto:

<style type="text/css"> 
     select[disabled] { background-color: blue; } 
    </style> 

que funciona en IE 7 e IE 8. Todavía no se puede alterar el color de primer plano, pero se puede cambiar el color de fondo para contrastar con más fuerza con el gris que IE asigna cuando está desactivada.

+3

IE9 no es compatible con la propiedad "color" cuando está deshabilitado. El texto sigue siendo ese gris feo con sombra blanca. – Craigo

+0

Las opciones seleccionadas tampoco son compatibles con IE o Chrome –

1

Lo siento por mi Inglés ...

eso no es posible el uso de CSS solo, IE no permite cambiar las propiedades de un selecto etiqueta discapacitados

1

Para aquellos que todavía encuentran esto.

No trabaja:

select[disabled] { background-color: blue; } 

de Trabajo:

select option [disabled] { background-color: blue; } will do 
1

Esto funcionó para mí

select[disabled='disabled']::-ms-value { 
    color: red; 
    } 
2

Esto funcionó para mí en WebKit y Firefox

select:disabled{ 
    opacity: 0.6; 
}