[html] Los cuadros de entrada con fondo transparente no se pueden hacer clic en IE8


6 Answers

Debe definir una imagen de fondo (transparente).

Por si acaso alguien estaría interesado. Una de las soluciones sugeridas ...

Question

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>



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');"/>



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




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.




Como Bobince observó, es un error IE7. A veces me pareció conveniente resolverlo agregando un value=" &nbsp; &nbsp; &nbsp; " . 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.




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



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.






Related