Color de texto de entrada desactivado

93

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 aplicada).

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

<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>

— Incidentalmente
fuente

También noté esto, para mí esto es un error, ya que cuando pones background-color: white de la entrada volverá a mostrar el color correctamente. Además, la opacidad tiene poco efecto. Aunque el -webkit-text-fill-color: # 880000 funcionará

— Miguel

235

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

— Kemo
fuente

51

Quería que mi cuadro de entrada deshabilitado se viera como uno normal. Esto es lo único que funcionaría en Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -Opacidad del kit de web: 1; fondo: blanco;

— Ryan

11

@Ryan tiene razón: la opacidad debe estar configurada 1para Mobile Safari.

— David Jones

7

opacity:1también es necesario.

— Marcel Falliere

3

La opacidad no es necesaria en las versiones actuales de Safari, a partir del verano de 2016.

— Andy Mercer

2

¡Salvó mi día! Sin embargo, también afecta la coloración del color del placeholdertexto del inputelemento. En caso de que también necesite una solución, consulte este enlace: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

Los navegadores webkit de teléfonos y tabletas (Safari y Chrome) y el IE de escritorio tienen una serie de cambios predeterminados en los elementos de formulario deshabilitados que deberá anular si desea modificar el estilo de las 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 */

— lijinma
fuente

6

es una pregunta interesante y he intentado muchas modificaciones para ver si puedo hacerlo funcionar, pero nada funciona. Los navegadores modernos en realidad usan sus propias hojas de estilo para decirle a los elementos cómo se muestran, por lo que tal vez si puede olfatear la hoja de estilo de Chrome, pueda ver qué estilos están imponiendo. Me interesará mucho el resultado y si no tienes uno me dedicaré un poco de tiempo a buscarlo más tarde cuando tenga tiempo que perder.

FYI,

opacity: 1!important;

no lo anula, por lo que no estoy seguro de que sea opacidad.

— Steve Perks
fuente

¡Gracias! No pude encontrar una explicación (nada de eso en la hoja de estilo del agente de usuario de Chrome, solo "color de fondo: rgb (235, 235, 228)" para entradas deshabilitadas) y estoy usando una solución alternativa, pero aún tengo curiosidad por saber qué está pasando el ...

— Incidentemente

Steve, gracias por el esfuerzo, pero te sugiero que en el futuro publiques esto como un comentario en lugar de una respuesta.

— avernet

6

Puede cambiar el color a #440000solo 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 forma, en todos los navegadores de todas las plataformas, se verá exactamente como los usuarios esperan.

— Kornel
fuente

5

ACTUALIZADO 2019:

Combinando ideas de esta página en una solución de "configurar y olvidar".

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 */
}

— paulcol.
fuente

4

Puede utilizar el atributo readonly en lugar del atributo disabled, 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. Mira w3.org

— Serxipc
fuente

gracias hombre sí, esta fue mi primera idea también, pero no funciona para mí debido al enfoque: en el iPhone, el teclado aparece cuando un usuario toca un elemento de solo lectura, y esto es confuso. He encontrado mi solución y mi La pregunta es más bien "teórica": ¿por qué este comportamiento?

— Incidentemente

Una solución alternativa interesante: el problema del enfoque también plantea problemas de usabilidad, en particular para las personas que utilizan lectores de pantalla. En la mayoría de los casos, simplemente no querrá que los usuarios puedan tabular campos de solo lectura / deshabilitados en un formulario.

— avernet

4

para @ryan

Quería que mi cuadro de entrada deshabilitado se viera como uno 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;

— vanduc1102
fuente

3

Si desea solucionar el problema de todas las entradas deshabilitadas, puede definir -webkit-text-fill-colora currentcolor, por colorlo que se utilizará la propiedad de la entrada.

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

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

— Freez
fuente

2

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

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

— conceptoDawg
fuente

3

y para Firefox, use input: -moz-placeholder

— stephan.com

1

eh ... esto es para el atributo de marcador de posición, no creo que tenga un efecto en los campos deshabilitados. -webkit-text-fill-colorSin embargo

— philfreo

0

¿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>

no realmente ... en mi aplicación real, esos cuadros de texto generalmente están habilitados y se usan para la entrada, y solo bajo ciertas condiciones se deshabilitan con JavaScript, puedo encontrar una solución alternativa (como, reemplazar <input /> con un <div> < / div> en lugar de configurar 'deshabilitado') - pero realmente se siente mal

— Incidentemente