¿Cómo creo un elemento de "búsqueda" similar al de this site?¿Cómo agrego un botón "buscar" en un campo de entrada de texto?
Si consideramos la fuente, tiene un cuadro de texto seguido de una etiqueta <span>.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
¿Dónde obtengo una imagen similar "lupa"?
poner la imagen en el lapso de, por ejemplo usando background-image, luego darle una posición relativa y moverlo a la izquierda por lo que se solapa con el extremo derecho del cuadro de búsqueda, por ejemplo:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Si ve la página en Google Chrome, haga clic derecho en el botón de búsqueda y seleccione "Inspeccionar elemento", podrá ver el CSS utilizado para lograr este efecto.
Si no está familiarizado con CSS, recomiendo ‘CSS: The Definitive Guide’.
+1 para la respuesta elegante. Firebug para Firefox debería mencionarse también. –
Un sitio como Iconspedia tiene un number of free icons que son similares.
Donde consiga el icono, tenga cuidado de asegurarse de tener los derechos para usarlo en su aplicación. Muchos gráficos están protegidos y algunos tienen licencias restrictivas.
Tenemos Font Awesome e IcoMoon hoy en día. –
Tus ojos te están engañando. El botón no está dentro del cuadro de texto. El uso de una imagen de fondo es NOT el camino a seguir, ya que no proporcionará el botón de envío cliqueable.
Lo que hay que hacer es añadir un div contenedor alrededor de la entrada: texto y de entrada: presentar
La envoltura se mirar como si fuera un cuadro de texto, sino que en realidad contienen un cuadro de texto transparente y un presente botón. Tendrá que eliminar específicamente los estilos para la entrada: texto y de entrada: presentar elementos
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Input Example</title>
<style type="text/css">
/* <![CDATA[ */
.search
{
border: 1px solid #000000;
width: 200px;
}
.search input[type="text"]
{
background: none;
border: 0 none;
float: left;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
width: 180px;
}
.search input[type="submit"]
{
background: #CCCCCC url(path/to/image.jpg);
border: 0 none;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
text-indent: 100px;
width: 20px;
}
/* ]]> */
</style>
</head>
<body>
<form ...>
<div class="search">
<input type="text" />
<input type="submit" />
</div>
</form>
</body>
</html>
Es muy importante que mantenga el botón de enviar, de lo contrario oprimir la tecla Enter mientras que la búsqueda no tendrá una reacción por defecto. Además, al colocar el botón Enviar después del campo de texto, las personas pueden hacer clic en el botón.
EDITAR: puede hacer su propia imagen de aumento, son bastante fáciles de hacer en un png transparente de 20x20px.
Para ayudar con los comentarios de los usuarios, ¿por qué no agregar el ícono del puntero al mouse cuando está sobre la lupa? Simplemente atienda esto a su CSS:
. Búsqueda: hover { cursor: puntero; }
Me gustaría conectar un nuevo plugin jQuery que escribí porque creo que responde a la solicitud del OP. Se llama jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.
Le permite agregar fácilmente un icono en el lado izquierdo de su campo de texto. Para usar el icono como un botón, puede enlazar fácilmente al evento 'iconfield.click', que se activa cuando el usuario hace clic en el ícono. También se ocupa de cambiar el cursor cuando el mouse está sobre el ícono.
Por ejemplo:
$('#search-field').iconfield({
'image-url': 'imgs/search.png', // url of icon
'icon-cursor': 'pointer' // cursor to show when hovering over icon
});
$('#search-field').on('iconfield.click', function() {
$('#search-form').submit()
}
me gustaría obtener alguna información sobre mi trabajo.
intenté usar este complemento pero el cursor de icono no funciona, iconfield.click no está activando, izquierda: la opción de false tampoco está funcionando !! – Bernice
Oye, por favor contáctame a través del correo electrónico que aparece en mi perfil de GitHub. Con mucho gusto solucionaré y corregiré. –
Acabo de enviarle un correo electrónico. ¡aclamaciones! – Bernice
Si utiliza una imagen de fondo en el campo, no hay forma de enlazarla para obtener la acción de hacer clic. Entonces, la solución es tener un campo de búsqueda e imagen separados, de modo que pueda vincular el evento de clics en jQuery a la imagen. Violín aquí:
http://jsfiddle.net/Lzm1k4r8/23/
Puede ajustar left: posición que deberá lado izquierdo o derecho del cuadro de búsqueda.
Esto me ahorró mucho tiempo :) – user2323308
@casablanca: ¿Tengo que poner background-image en lugar de background-color – Someone
@Derby: yup, si. –
@casablanca: 9,987 puntos. Entonces ... cerca ... a ... moderador ... poderes ... –