Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Poner imagen dentro de campo de texto

Hola, como andan? bin, queria saber si alguien me podria ayudar con esto. Tengo un buscador, pero quiero poner adentro de el (precisamente en la derecha del buscador) la imagen de una lupa. Ya tengo el buscador y la lupa sin fondo. Trate varias veces, pero no entiendo como hacerlo. Alguien que me ayude? Desde ya muchas gracias
0
Puntos
17551
Visitas
2
Resp
Por GeorgeHarrison hace 121 meses
Principiante
Respuesta #1
Hola George, yo te recomiendo de ésta forma.

Creas un div con un borde, dentro de él colocas a la izquierda el input sin bordes y a la derecha la imagen. Quedaría algo así
Imagen

Te mostraré el código de cómo lo hice, tuve que utilizar position:relative; para cuadrar bien la imagen y la caja de texto.

El código html.
<div class="buscador">
    <form action="#">
        <input type="text" class="buscar">
        <input type="image" src="images/icon/search.png" class="image_buscar">
    </form>
</div>

El código css.
div.buscador {
	border:1px solid #d7d7d7;
	padding: 4px;
	height: 22px;
	width: 270px;
}
input.buscar {
	border: 0px;
	width: 240px;
	position: relative;
	background: transparent;
	outline: none;
	bottom: 4px;
	padding: 2px;
}
input.image_buscar {
	width: 20px;
	border: 0px;
	position: relative;
	top:1px;
}
Lo que dice top, bottom.. Eso se utiliza cuando usas position:relative; y sirve para cuadrar cosas. "Top" quiere decir: X píxeles distanciados desde arriba. Y "bottom" quiere decir: X píxeles distanciados desde abajo. No me gusta mucha usarlo porque parece que lo estoy cuadrando a la fuerza pero bueno, igual sirve xd

Espero haberte ayudado :)
10
Puntos
Por Jose hace 121 meses
Experto Sitio web
Respuesta #2
Muchas gracias, ya me funciono!!
0
Puntos
Por GeorgeHarrison hace 121 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate