relleno de una entrada de texto en IE ... posible?

Tengo una entrada de texto con un botón de búsqueda sobre ella absoluta ... para hacer espacio para el botón Utilicé un relleno para evitar que el texto pase al botón, lo cual está bien, funciona en Firefox, pero no en IE .relleno de una entrada de texto en IE ... posible?

De hecho ... No parece que el relleno en las entradas de texto funcione en IE.

Ellos tienen el código


<style type="text/css"> 
#mainPageSearch input { 
    width: 162px; 
    padding: 2px 20px 2px 2px; 
    margin: 0; 
    font-size: 12px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top; 
    border-color:#C6C6C6 #C6C6C6 #E3E3E3; 
    border-style:solid; 
    border-width:1px; 
    color:#666666; 
} 
#mainPageSearch { 
    margin-bottom: 10px; 
    position: relative; /* Lets me absolute position the button */ 
} 
#mainPageSearchButton { 
    display: block; 
    position: absolute; 
    top:0px; 
    right: -2px; 
    text-indent: -2000em; 
    height: 22px; 
    width: 22px; 
    background: transparent url('images/searchBtn.png') top center no-repeat; 
} 
</style> 


<form id="mainPageSearch" action=""> 
    <input type="text"/> 
    <a id="mainPageSearchButton" href="#">Search</a> 
</form>

siguiente es lo que estoy tratando de hacer posible o debo aguantar y tratar con el texto que va bajo el botón de búsqueda?

Sé que podría hacer un cuadro de búsqueda con un fondo/borde transparente y dibujar el estilo usando un div conteniendo ... pero eso no es realmente una opción debido a la cantidad de lugares en los que tengo que cambiarlo el sitio.

Tal vez haga una nueva clase para esta entrada de texto que la haga transparente y asigne el estilo de entrada de texto normal al div que contiene? ¿Qué piensas?

edición: lo siento, debería haber incluido el tipo de documento ... aquí está:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

también, los problemas que estoy teniendo son en IE 7

Fuente

2009-03-03 Jiaaro

tratar de usar line-height

Fuente

2009-12-15 23:12:34 chris

Finalmente me encontré con esta posibilidad, pero su respuesta seguramente merece un voto positivo :) – Jiaaro

Hmm ... esto parece funcionar bastante bien en el navegador cruzado y es la mejor solución que he visto hasta ahora. Sin embargo, hace que el tamaño del cursor sea diferente en Chrome e IE (ligeramente descentrado o más alto), lo que es ligeramente molesto. –

ligeramente molesto == no especifico Creo que usaré el hack de Filip. –

Vas a tener que use float: izquierda/derecha en '#mainPageSearch input' antes de poder aplicar relleno/margen.

Fuente

2009-03-03 16:56:17

Gracias! Ese es el truco que estaba buscando :) estúpido IE – Jiaaro

perdón por dárselo y luego quitárselo ... después de aplicarlo al sitio (no es mi archivo de prueba) hace que el botón desaparezca – Jiaaro

Tengo lo siguiente trabajando en IE7. ¿A qué versión estás apuntando?

<style type="text/css"> 

    input#test { 
     padding: 10px; 
    } 

</style> 


<input type="text" id="test" />

Fuente

2009-03-03 16:57:55

Lo único que quiero es relleno a la derecha para que el texto no quede debajo del pequeño botón de lupa que he posicionado completamente sobre la barra de búsqueda – Jiaaro

intente eso para cualquiera que sea Veo que no se aplica relleno. –

he experimentado un problema similar - IE fue el acolchado del campo de entrada, pero no por lo que es más grande, empujando así el texto hacia abajo en el interior de la misma. Lo arreglé estableciendo la altura de la entrada también. Trata eso.

Fuente

2010-07-28 22:39:42

tuve este problema también lo solucioné añadiendo la siguiente línea

input 
{ 
    overflow:visible; 
    padding:5px; 
}

esperanza esto ayuda? Házmelo saber.

Fuente

2011-03-18 22:26:39

Gracias por esto. Tuve el mismo problema y esto funcionó para mí. Aclamaciones. –

yeah overflow: visible también me gustó en IE7 – nerdess

Pruebe border-right en lugar de padding-right. Esto funcionó para mí.

Fuente

2011-06-24 11:45:30 Olli

Si desea que una imagen de fondo se muestre a través del borde, asegúrese de que el estilo de borde no sea "sólido". –

Funcionó para mí ... –

Haga estilos de su entrada transparentes y colocar dentro de un contenedor div:

http://jsfiddle.net/LRWWH/211/

HTML

<div class="input-container"> 
<input type="text" class="input-transparent" name="fullname"> 
</div>

CSS

.input-container { 
    background:red; 
    overflow:hidden; 
    height: 26px; 
    margin-top:3px;   
    padding:6px 10px 0px; 
    width: 200px; 
    } 

.input-transparent { 
    background-color:transparent; 
    border:none; 
    overflow:hidden;   
    color:#FFFFF; 
    width: 200px; 
    outline:none; 
    }

Fuente

2012-04-06 13:22:21

Hay un css única solución para que

div.search input[type="text"] { 
    width: 110px; 
    margin: 0; 
    background-position: 0px -7px; 
    text-indent:0; 
    padding:0 15px 0 15px; 
} 
/*ie9*/ div.search input[type="text"] { 
    border-left: 25px solid transparent; 
} 
/*ie8*/ div.search input[type="text"] { 
    border-left: 25px solid transparent; 
    background-position-x: -16px; 
    padding-left: 0px; 
    line-height: 2.5em; 
}

Gracias Muhammad Atif Chughtai

Fuente

2013-03-14 11:59:02 user2169658

Esta es la única respuesta proporcionada por el código que funciona en el viejo IE. – Raptor

¿Qué hay de declarar DOCTYPE?

Al agregar <!DOCTYPE html> el relleno funciona para mí en IE8. Tome el siguiente código como un ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #myInput { 
     padding: 10px; 
     } 
    </style> 
    </head> 
    <body> 
    <input id="myInput" value="Some text here!" /> 
    </body> 
</html>

Fuente

2013-05-27 11:08:44

relleno de una entrada de texto en IE ... posible?

Respuesta

Cuestiones relacionadas