¿Rellenar una entrada de texto en IE ... posible?

StackOverflow https://stackoverflow.com/questions/607198

Pregunta

Tengo una entrada de texto con una búsqueda pero una posición absoluta sobre ella ... para hacer espacio para el botón, utilicé algunos rellenos para evitar que el texto se coloque debajo del botón, lo cual está bien, funciona en Firefox, pero no IE.

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

Tienen el siguiente 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>

¿Es posible lo que estoy tratando de hacer o debería simplemente asimilarlo y tratar con el texto debajo del botón de búsqueda?

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

¿Quizás 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?

editar : lo siento, debería haber incluido el doctype ... 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 tengo están en IE 7

¿Fue útil?

Solución

intenta usar la altura de línea

Otros consejos

También tuve este problema, lo resolví agregando la siguiente línea 

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

espero que esto ayude? Déjame saber.

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

Haga que su entrada sea transparente y coloque estilos 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;
  }

Hay una solución css solo para ello 

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

Tendrás que usar float: left / right en '#mainPageSearch input' antes de que puedas aplicar el relleno / margen.

Experimenté un problema similar: IE rellenaba el campo de entrada, pero no lo hacía más grande, por lo que empujaba el texto hacia abajo. Lo arreglé estableciendo la altura de la entrada también. Intenta eso.

Tengo el siguiente trabajo en IE7. ¿A qué versión te diriges? 

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


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

¿Qué hay de declarar DOCTYPE?

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top