html - areatext - text input
rellenar una entrada de texto en IE... ¿es posible? (9)
¿Qué tal declarar DOCTYPE?
Al agregar <!DOCTYPE html> padding funciona 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>
Tengo una entrada de texto con un botón de búsqueda posicionado en forma absoluta sobre ella ... para hacer espacio para el botón, utilicé un relleno para evitar que el texto pase por debajo del botón, lo cual está bien, funciona en Firefox, pero no en IE.
De hecho ... No parece que el relleno en las entradas de texto funcione en IE.
Ellos 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 hacerlo bien y tratar el texto que está 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 usando un div que contiene ... pero esa no es realmente una opción debido a la cantidad de lugares que tengo que cambiar en 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?
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 estoy teniendo están en IE 7
Deberá usar float: izquierda / derecha en ''#mainPageSearch input'' antes de poder aplicar relleno / margen.
Experimenté un problema similar: IE estaba rellenando el campo de entrada, pero no haciéndolo más grande, empujando así el texto hacia abajo. Lo arreglé estableciendo la altura de la entrada también. Trata eso.
Haga su entrada 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 un css solo arreglo para eso
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
Pruebe border-right lugar de padding-right . Esto funcionó para mí.
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" />
Tuve este problema también lo resolví agregando la siguiente línea
input
{
overflow:visible;
padding:5px;
}
¿espero que esto ayude? Házmelo saber.
intente usar línea-altura