Texto de entrada de texto deshabilitado

El HTML simple a continuación se muestra de forma diferente en los navegadores basados en Firefox y WebKit (lo compré en Safari, Chrome y iPhone).Texto de entrada de texto deshabilitado

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

¿Puedo arreglar 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 elementos input con elementos de estilo div), pero aún tengo curiosidad por saber por qué sucede esto y si hay alguna manera 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>

Fuente

2008-11-04 Incidently

@ La respuesta de Kemo a continuación es correcta - debe confirmarla y aceptarla. – philfreo

132

-webkit-text-fill-color:#880000

Fuente

2011-01-10 15:21:54 Kemo

¡Esta solución solo funciona para mí! rep up.! gracias – kajo

+43

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; fondo: blanco; – Ryan

@Ryan tiene razón: la opacidad debe establecerse en '1' para Mobile Safari. –

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

2008-11-04 16:56:21

no realmente ... en mi aplicación real esos cuadros de texto generalmente están habilitados y utilizados para la entrada, y solo bajo ciertas condiciones se desactivan con JavaScript Puedo encontrar una solución (como, reemplazar con un estilo

en lugar de establecer ' deshabilitado ') - pero realmente se siente mal – Incidently

es una cuestión interesante y he probado un montón de anulaciones para ver si puedo ponerlo en marcha, pero nada de trabajo. Los navegadores modernos en realidad usan sus propias hojas de estilo para indicar a los elementos cómo mostrarlos, así que tal vez si puede ojear la hoja de estilos de Chrome, puede ver en qué estilos se están forzando. Me interesará mucho el resultado y, si no tienes uno, dedicaré un poco de tiempo a buscarlo más adelante cuando tenga tiempo que perder.

FYI,

opacity: 1!important;

no anularlo, así que no estoy seguro de que es la opacidad.

Fuente

2008-11-04 23:22:57

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 todavía curioso pasando ... – Incidently

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

gracias! esto es – Jonathan

Se puede cambiar de color para #440000 sólo para Safari, pero en mi humilde opinión la mejor solución sería no cambio se ve del botón en absoluto. De esta forma, en cada navegador en cada plataforma, se verá exactamente como los usuarios esperan.

Fuente

2008-11-05 00:00:23 Kornel

Puede usar el atributo de solo lectura en lugar del atributo deshabilitado, pero luego tendrá que agregar una clase porque no hay una entrada de pseudoclase: solo lectura.

<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 en el envío. Mire w3.org

Fuente

2008-11-05 16:27:44 Serxipc

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

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

Esta pregunta es muy antigua pero pensé que publicaría una solución webkit actualizada. Sólo tiene que utilizar el siguiente CSS:

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

Fuente

2010-06-01 16:09:23 conceptDawg

y para Firefox, use la entrada: -moz-placeholder –

eh .. esto es para el atributo marcador de posición, no creo que tenga un efecto en los campos desactivados. La respuesta de @ Kemo a continuación ('-webkit-text-fill-color') funciona a través de – philfreo

teléfono y Tablet navegadores WebKit (Safari y Chrome) y de escritorio es decir, tienen una serie de cambios por defecto a los elementos de formulario con discapacidad que necesitará para anular si quieres para estilo entradas inhabilitadas.

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

Fuente

2014-05-07 07:20:59 lijinma

para @ryan

quería que mi cuadro de entrada de personas con discapacidad para parecerse a 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;

Fuente

2017-07-20 08:31:31 vanduc1102

Texto de entrada de texto deshabilitado

Respuesta

Cuestiones relacionadas