opciones - Estilo deshabilitado<seleccionar>(cuadros desplegables) en HTML

listas desplegables en html ejemplos

Question

Uno de nuestros clientes tiene dificultades para leer el texto gris en los controles deshabilitados en nuestra aplicación basada en web:

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 usa el cliente) ignoran el color: ... atributo de CSS en los controles deshabilitados, por lo que no podemos cambiar el color de primer plano.

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

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

PS: Usar el selector [disabled] en CSS no hace una diferencia.

Answer 1

En Internet Explorer 9, se agregará soporte para :disabled pseudo-selector :disabled ( ref ). No sé si eso honrará la propiedad del "color", pero parece probable.

En versiones anteriores de IE, puede ajustar el color de fondo (pero no el color). Así:

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

Eso funciona en IE 7 e IE 8. Aún no puedes alterar el color de primer plano, pero puedes cambiar el color de fondo para contrastar más fuertemente con el gris que IE le asigna cuando está deshabilitado.

Answer 2

Esto funciono para mi

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

Answer 3

Esto me funcionó en webkit y Firefox.

select:disabled{
   opacity: 0.6;
}

Answer 4

Lo siento por mi ingles...

Eso no es posible con solo css, IE no permite cambiar las propiedades de una etiqueta de selección deshabilitada

Answer 5

Para aquellos que todavía encuentran esto.

No funciona:

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

Trabajando:

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

Answer 6

Puedes probar lo siguiente:

    <style>
        /*css style for IE*/
        select[disabled=''disabled'']::-ms-value {
            color: #555;
        }
        /*Specific to chrome and firefox*/
        select[disabled=''disabled''] {
            color: #555;
        }
    </style>