html - Los cuadros de entrada con fondo transparente no se pueden hacer clic en IE8
css internet-explorer-8 (14)
Aquí hay un caso de prueba muy simple:
<html>
<head>
</head>
<body style="direction: ltr;">
<br/><br/><br/>
<INPUT style="WIDTH: 100%;" />
<DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
<INPUT style="WIDTH: 100%; background-color: transparent;"/>
</DIV>
</body>
</html>
Cuando se ejecuta en IE8, debería ver el foco en el cuadro de texto subyacente en lugar del cuadro de texto absolutamente posicionado.
Nuestra solución fue establecer el color de fondo transparente y la imagen de fondo transparente:
<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url(''transparent.gif'');"/>
Tengo un cuadro de entrada completamente posicionado en un formulario. El cuadro de entrada tiene fondo transparente:
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
Sorprendentemente, no puedo seleccionar este cuadro de entrada haciendo clic en IE8. Sin embargo, funciona perfectamente en Firefox. Lo mismo ocurre con el background: none . Cuando cambio el color de fondo:
background-color: red;
Funciona bien, por lo que este es un problema asociado con el fondo transparente. Establecer un borde hace que el cuadro de entrada se pueda seleccionar haciendo clic solo en su borde.
¿Hay alguna solución para tener un cuadro de entrada seleccionable con fondo transparente que funcione en IE8?
Actualización: Ejemplo. Descomenta background-color y la casilla de entrada es seleccionable. También puede hacer clic en el cuadro de selección y enfocar el cuadro de entrada presionando Shift + Tab.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"] {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
Como Bobince observó, es un error IE7. A veces me pareció conveniente resolverlo agregando un value=" " . Use tantos espacios sin interrupción como sea necesario para que el área en la que se puede hacer clic sea lo suficientemente grande. Dependiendo de su aplicación, es posible que deba quitarlas más tarde.
Debe definir una imagen de fondo (transparente).
Por si acaso alguien estaría interesado. Una de las soluciones sugeridas ...
En realidad, en mi caso fue como
text-indent: -9999px
Solía eliminar el texto, no lo haga y se puede volver a hacer clic.
He encontrado el mismo problema al usar IE10 en Windows 7. Los siguientes métodos me solucionaron el problema.
El método de Franky usando una imagen de fondo transparente ...
background:url(/images/transparent.gif);
Método de Sketchfemme que utiliza un color de fondo rgba con opacidad ''0''
background-color:rgba(0,0,0,0);
La sugerencia de Jim Jeffers para editar el índice z no funcionó para mí.
IE en su sabiduría infinita está decidiendo no representar el elemento porque piensa que no hay nada que representar. Existen numerosas formas de abordar esto, pero básicamente deberá darle al IE algo para masticar.
Agregar un ''valor = x'' a la etiqueta de entrada definitivamente funciona. Pero más que probable que no sea la mejor solución. Un color simple, negro: sin el foco, permite que el elemento sea tabulado. Agregar '': focus'' al estilo de entrada permite que el elemento se renderice.
Prueba esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>
<style type="text/css">
input[type="text"]:focus {
border: none;
background: transparent;
/*background-color: blue;*/
}
#elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
#elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>
<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>
</body></html>
No puedo reproducir ese problema en IE8. ¿Caso de prueba completo? ¿Estás seguro de que no hay un problema de estratificación que haga que otro elemento transparente cubra el área en la que se puede hacer clic?
¿La configuración background-image hace la diferencia? ¿Qué tal un GIF transparente?
ETA: ¡Curioso! En realidad es un error IE7. Para mí, su ejemplo exhibe el comportamiento descrito en IE7, pero en IE8 es solo cuando está en el modo EmulateIE7; en la representación nativa de IE8 es fijo. Por lo general, querrá asegurarse de no recurrir a la representación de IE7 utilizando un encabezado / meta X-UA-Compatible adecuado; sin embargo, sí, establecer la background-image en un GIF transparente me solucionó el problema. Tsk, todavía necesitamos el GIF en blanco incluso en este día y edad, ¿eh?
Por favor incluya el html para el elemento de entrada.
¿Cómo definiste el elemento de entrada? El siguiente código funciona en IE8 (IE 8.0.7600 Windows). Intenté esto en IE8 y pude ''seleccionar'' el área de entrada sin problemas.
<html>
<head>
<style>
.form-page input[type="text"] {
border: none;
background-color: transparent;
/* Other stuff: font-weight, font-size */
}
</style>
</head>
<body>
<input type="text" name="test" value="test" id="test"/>
</body>
</html>
Puede parecer extraño, pero debe intentar especificar explícitamente el índice Z de los elementos involucrados. Esto debería obligar a que la entrada se renderice sobre el elemento con el color / imagen de fondo aplicado.
Simplemente déle al campo de entrada una imagen de fondo transparente y funcionará ...
Ejemplo:
#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}
Sin embargo, parece que incluso con el truco transparente de GIF, si configuras el fondo: transparente en cualquier otro lugar de tu CSS, para navegadores web reales, desencadena el error IE7 y no obtienes un cursor sobre el vuelo estacionario y no puedes hacer clic fácilmente en él el cuadro de entrada.
Tenía el problema similar -> IE8 cuadro de texto no era editable (cuando el contenedor de mi aplicación tiene posición: absoluta). Haga clic en trabajado solo en el borde. Lleno de color y transparente tampoco funcionó. Con el siguiente cambio de tipo de documento, el problema es fijo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Fuente: http://www.codingforums.com/showthread.php?p=1173375#post1173375
esta es una gran pregunta Nunca hubiera sido capaz de descubrir lo que estaba pasando sin esta publicación. Sin embargo, mi solución fue usar rgba(0,0,0,0) lugar de gif transparente.
background-image:url(about:blank);background-color:transparent;