Color de texto de entrada desactivado

Question 1

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>

Question 2

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

Question 3

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

Question 4

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.

Question 5

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.

Question 6

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

Question 7

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

Question 8

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;

Question 9

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/

Question 10

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

Question 11

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

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

11

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

David Jones

Answer 6

7

opacity:1también es necesario.

Marcel Falliere

Answer 7

3

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

Andy Mercer

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

¡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

Answer 12

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

avernet

Answer 13

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.

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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;

Answer 19

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/

Answer 20

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

Answer 21

3

y para Firefox, use input: -moz-placeholder

stephan.com

Answer 22

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

Answer 23

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>

fuente

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

Answer 24

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

Color de texto de entrada desactivado

Respuestas: