negativo - mi iphone cambio de color la pantalla
Color de texto de entrada desactivado (8)
El sencillo HTML a continuación se muestra de forma diferente en los navegadores basados en Firefox y WebKit (lo comprobé 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 cierta transparencia aplicada).
¿Puedo arreglar esto de alguna manera (eliminar esta transparencia en Safari)?
ACTUALIZAR:
Gracias por sus respuestas. Ya no necesito esto para mi trabajo (en lugar de deshabilitarlo, estoy reemplazando input elementos de input con elementos div con estilo), pero sigo sintiendo curiosidad sobre 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>
¿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>
es una pregunta interesante y he probado 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 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 lo anula, así que no estoy seguro de que sea opacidad.
Podrías 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. De esta forma, en cada navegador en cada plataforma, se verá exactamente como los usuarios esperan.
Puede usar el atributo de solo lectura en lugar del atributo desactivado, pero luego deberá 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. Mira w3.org
Esta pregunta es muy antigua, pero pensé que publicaría una solución webkit actualizada. Solo usa el siguiente CSS:
input::-webkit-input-placeholder {
color: #880000;
}
-webkit-text-fill-color:#880000
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 formularios desactivados que deberá anular si desea personalizar 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 */
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;