Color de texto de entrada deshabilitado

StackOverflow https://stackoverflow.com/questions/262158

Pregunta

El HTML simple a continuación se muestra de manera diferente en los navegadores basados ??en Firefox y WebKit (verifiqué en Safari, Chrome y iPhone).

En Firefox, tanto el borde como el texto tienen el mismo color ( # 880000 ), pero en Safari el texto se vuelve un poco más claro (como si tuviera algo de transparencia aplicado).

¿Puedo solucionar esto de alguna manera (eliminar esta transparencia en Safari)?

ACTUALIZACIÓN:
Gracias por sus respuestas. Ya no necesito esto para mi trabajo (en lugar de deshabilitar, estoy reemplazando los elementos input con elementos con estilo div ), pero todavía tengo curiosidad por qué sucede esto y si hay alguna forma de controlar este comportamiento ... 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    input:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <input type="text" value="disabled input box" disabled="disabled"/>
    </form>
</body>
</html>
¿Fue útil?

Solución 

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

Otros consejos

Los navegadores webkit de teléfono y tableta (Safari y Chrome) y el escritorio IE tienen una serie de cambios predeterminados a los elementos de formulario deshabilitados que deberá anular si desea diseñar entradas deshabilitadas. 

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */

es una pregunta interesante y he intentado muchas anulaciones para ver si puedo hacerlo funcionar, pero nada funciona. Los navegadores modernos en realidad usan sus propias hojas de estilo para indicar a los elementos cómo mostrar, por lo que tal vez si puede detectar la hoja de estilo de Chrome puede ver qué estilos están forzando. Estaré muy interesado en el resultado y, si no tiene uno, pasaré un poco de tiempo buscándolo más tarde cuando tenga algo de tiempo que perder.

FYI, 

opacity: 1!important;

no lo anula, así que no estoy seguro de que sea opacidad.

Puede cambiar el color a # 440000 solo para Safari, pero en mi humilde opinión, la mejor solución sería no cambiar el aspecto del botón en absoluto . De esta manera, en cada navegador en cada plataforma, se verá exactamente como los usuarios lo esperan.

Puede usar el atributo readonly en lugar del atributo deshabilitado, pero luego deberá agregar una clase porque no hay una entrada de pseudo-clase: readonly. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

Tenga en cuenta que una entrada deshabilitada y una entrada de solo lectura no son lo mismo. Una entrada de solo lectura puede tener foco y enviará valores al enviar. Mire w3.org

para @ryan

Quería que mi cuadro de entrada deshabilitado se viera normal. Esto es lo único que funcionaría en Safari Mobile. 

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

Esta pregunta es muy antigua pero pensé que publicaría una solución webkit actualizada. Simplemente use el siguiente CSS: 

input::-webkit-input-placeholder {
  color: #880000;
}

Si desea solucionar el problema para todas las entradas deshabilitadas, puede definir -webkit-text-fill-color en currentcolor , por lo que el color se usará la propiedad de la entrada. 

input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

Mira ese violín en Safari https://jsfiddle.net/u549yk87/3/

ACTUALIZADO 2019:

Combinando ideas de esta página en un "conjunto y olvido" solución. 

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

¿Puedes usar un botón en lugar de una entrada? 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top