lupa para un buscador con un form

humanista · #1 (**permalink**) 28/11/2011, 15:25

Hola, tengo una caja (input), dentro de un formulario. La uso para buscar por el término que se introduce en la caja.

El tema es que tengo la caja y justo pegado a su derecha he puesto una lupa para que quede chulo. La lupa por supuesto también está dentro de form.

El caso es que si introduzco un término para buscar y en lugar de pulsar al intro pulso la lupa, no me hace nada, no me busca como lo hace si pulso intro.

Qué puedo hacer para que tanto el intro como al hacer click en la lupa tengan el mismo comportamiento?

Carlangueitor · #2 (**permalink**) 28/11/2011, 15:28

La mejor forma es que el botón de submit tenga la imagen de la lupa, con un fondo mediante CSS.

Saludos

humanista · #3 (**permalink**) 28/11/2011, 17:15

vale, he usado input type image pero en la url a la que me manda me salen las coordenadas x e y de donde he pinchado en la imagen (botón).

cómo sería con button submit? pq lo he intentado y no me ejecuta el formulario

Código HTML:

Ver original<button name="xxx" type="button" style="background-image:url(imagen.jpg);">

IsaBelM · #4 (**permalink**) 28/11/2011, 17:25

lee esto

emprear · #5 (**permalink**) 28/11/2011, 17:57

Es que para eso está específicamente un input image, para pasar las coordenadas x e y de una imagen, lo que te aconsejo, y siguiendo la linea de carlangueitor es que estilices un imput submit con una imagen de fondo.
Algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
input.lupa{
width: 17px;
height: 17px;
background-image: url('http://foros.emprear.com/img/fdw/loupe.png');
background-color: transparent;
color: transparent;
border: none;
outline: none;
cursor: pointer;
}
/*]]>*/
</style>
</head>
<body>
<form action="#">
<p>
<input type="text" name="buscar" />
<input type="submit" class="lupa" value="." title="buscar" />
</p>
</form>
</body>
</html>

saludos

humanista · #6 (**permalink**) 28/11/2011, 17:59

vale gracias, me va bien pero es raro... cuando sitúo el cursor sobre la imagen se me mueve como un par de pixels hacia la derecha y se me subraya en un recuadro azul como si fuese un link o algo así. Tanto en el Chrome, IE, Opera, FireFox y Safari.

emprear · #7 (**permalink**) 28/11/2011, 18:05

yo lo uso en ie9/8 , FF, opera, Chrome, safari y no se mueve nada, quizás tengas algo más en tu css, ó un reset, que esté afectando .

Te dejo una demo para que compares

http://foros.emprear.com/css/buscar-lupa.html

saludos

humanista · #8 (**permalink**) 28/11/2011, 18:11

genial emprear!, tu ejemplo me fue perfecto

IsaBelM · #9 (**permalink**) 29/11/2011, 06:24

aunque ya no hay caso y sólo por aclarar el por qué de mi respuesta

usar <button> tiene varias ventaja

con una sola regla se puede crear tantos botones con imágenes como queramos

Cita:

Cita:

button{
background: transparent;
border: none;
outline: none;
vertical-align: middle;
}

se le puede insertar texto
podemos insertarle un buen manojo de tags