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
Puntos
17590
Visitas
Visitas
2
Resp
Resp
Por GeorgeHarrison hace 122 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.
El código css.
Espero haberte ayudado :)
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 :)
Respuesta #2
Muchas gracias, ya me funciono!!
0
Puntos
Puntos
Por GeorgeHarrison hace 122 meses
Principiante