Come si crea un elemento di "ricerca" simile a quello in this site?Come aggiungo un pulsante "cerca" in un campo di inserimento del testo?
Se consideriamo fonte, ne ha una casella di testo, seguito da un tag <span>.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
Dove posso ottenere un'immagine simile a "lente di ingrandimento"?
mettere l'immagine nella campata, ad esempio utilizzando background-image, poi dare una posizione relativa e spostarlo verso sinistra in modo che si sovrappone l'estremità destra della casella di ricerca, ad esempio:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Se visualizzi la pagina in Google Chrome, fai clic con il pulsante destro del mouse sul pulsante di ricerca e seleziona "Ispeziona elemento", sarai in grado di vedere il CSS utilizzato per ottenere questo effetto.
Se non si ha familiarità con i CSS, consiglio vivamente lo ‘CSS: The Definitive Guide’.
+1 per la risposta elegante. Dovrebbe essere menzionato anche Firebug per Firefox. –
Un sito come Iconspedia ha uno number of free icons simili.
Ovunque venga visualizzata l'icona, fare attenzione per assicurarsi di disporre dei diritti per utilizzarla nella propria applicazione. Molti elementi grafici sono protetti e alcuni hanno licenze restrittive.
Oggigiorno abbiamo Font Awesome e IcoMoon. –
I tuoi occhi ti stanno ingannando. Il pulsante non si trova all'interno della casella di testo. Utilizzando un'immagine di sfondo è NON la strada da percorrere, in quanto non fornirà il pulsante di invio cliccabile.
Quello che dovete fare è aggiungere un div wrapper per l'input: testo e di input: presentare
Il wrapper guardare come se fosse una casella di testo, ma sarà effettivamente contengono una casella di testo trasparente e un submit pulsante. Avrete bisogno di specificamente rimuovere gli stili per l'input: testo e di input: presentare elementi
<!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>
E 'molto importante mantenere il pulsante di invio, altrimenti premendo invio, mentre la ricerca non avrà una reazione di default. Inoltre, posizionando il pulsante di invio dopo il campo di testo, le persone possono effettivamente fare clic sul pulsante.
MODIFICA: puoi creare la tua immagine ingrandente, sono abbastanza facili da realizzare in un png trasparente 20x20px.
Per aiutare con il feedback degli utenti perché non aggiungere l'icona del puntatore al mouse quando si passa il mouse sulla lente di ingrandimento? Attaccalo al tuo CSS:
. Ricerca: hover { cursore: puntatore; }
Vorrei collegare un nuovo plug-in jQuery che ho scritto perché ritengo che risponda alla richiesta dell'OP. Si chiama jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.
Consente di aggiungere facilmente un'icona sul lato sinistro del campo di testo. Per utilizzare l'icona come un pulsante, puoi facilmente associare l'evento 'iconfield.click', che viene attivato quando l'utente fa clic sull'icona. Si occupa anche di cambiare il cursore quando il mouse passa con il mouse sopra l'icona.
Per esempio:
$('#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()
}
Mi piacerebbe ottenere un feedback sul mio lavoro.
ho provato a usare questo plugin ma il cursore dell'icona non funziona, iconfield.click non si attiva, a sinistra: l'opzione false non ha effetto !! – Bernice
Ehi, per favore contattami tramite l'e-mail elencata sul mio profilo GitHub. Sarò lieto di risolvere e correggere. –
Ti ho appena mandato un'e-mail. Saluti! – Bernice
Se si utilizza un'immagine di sfondo sul campo, non è possibile eseguire il binding ad esso per ottenere l'azione di clic. Quindi la soluzione è avere un campo di ricerca e un'immagine separati, in modo da poter associare l'evento click in jQuery all'immagine. Fiddle qui:
http://jsfiddle.net/Lzm1k4r8/23/
È possibile regolare left: posizione da sinistra o destra della casella di ricerca.
Questo mi ha risparmiato molto tempo :) – user2323308
@casablanca: Devo inserire l'immagine di sfondo anziché il colore di sfondo – Someone
@Derby: sì, lo fai. –
@casablanca: 9,987 punti. Quindi ... vicino ... a ... moderatore ... poteri ... –