Creare una barra di ricerca con i CSS

Il modulo per effettuare ricerche sul sito è un componente fondamentale per la maggior parte delle tipologie di siti web. Normale, dunque, dedicargli la giusta attenzione, sia a livello funzionale sia nell'aspetto grafico. Da questo punto di vista, basta consultare un servizio per il posting di screenshot come Dribble per verificare la gamma di soluzioni creative e tecniche con cui è possibile dare enfasi a quello che di base si presenterebbe come un anonimo campo di testo accompagnato da un altrettanto anonimo pulsante.

In questo articolo ci soffermeremo unicamente sugli stili, analizzando come con i CSS sia possibile ricreare l'aspetto grafico di quelle che ci sembrano le tendenze prevalenti nel design dei moduli di ricerca. Prima, però, impostiamo le basi del nostro lavoro.

Il markup HTML

Seguendo le buone pratiche della codifica HTML per i form, dovremmo basare il nostro modulo di ricerca su tre elementi:

• un campo di input testuale;
• una label ad esso associata;
• un pulsante per il submit.

La label

In realtà, una cosa si constata subito facendo un giro sul web: i campi di ricerca non sono praticamente mai accompagnati da una label esplicita e visibile posta accanto (o sopra) al campo di testo. La funzione di quest'ultimo e del form è sempre resa evidente in altri modi: la presenza di un testo predefinito all'interno del campo di ricerca e/o di icone tipicamente associate alla ricerca (la lente di ingrandimento), ma anche dal testo presente sul pulsante di submit ('Cerca', 'Search', 'Buscar', etc…) che rende immediatamente evidente a cosa serve il form.

Analizzando un campione più o meno esteso di siti, potrete verificare che la label o non è definita nel markup HTML o viene inserita per essere poi nascosta con i CSS. Un esempio di questo approccio lo ritroviamo sul sito di Roger Johansson. Questo il codice HTML

<label for="search" class="structural">Search 456bereastreet.com</label>
<input type="search" id="search" name="search" class="txt" size="20">
<input type="submit" class="btn" value="Search">

e questa la regola CSS con cui la label viene nascosta:

.structural {
position:absolute;
left:-9999px;
}

Questa soluzione è indubbiamente da preferire se si vuole dare la giusta attenzione all'accessibilità.

type="search" o type="text"?

Un'altra questione riguarda il campo testuale per la ricerca. HTML5 ha introdotto una tipologia di input ad hoc per la ricerca: <input type="search">. È supportato da tutti i browser tranne che da Internet Explorer. Non sarebbe un problema, perché sul browser di Microsoft questo tipo di input viene reso come un normale campo di testo. I problemi, se così si può dire, vengono invece dai browser basati su WebKit come Chrome e Safari.

Non aderendo alla specifica (che equipara i campi di tipo search a quelli testuali), WebKit rende a schermo questi input con un aspetto e con delle funzionalità che emulano quelli del campo di ricerca di Safari. Ecco uno screenshot:

Il guaio vero è che non è possibile modificare con i CSS proprietà visuali fondamentali per una personalizzazione del campo (padding, colore di sfondo, font, bordo, etc.)! Pertanto, o ci teniamo l'input di tipo search così com'è, oppure… Oppure lo resettiamo, disabilitando la formattazione di WebKit! Basta inserire nel foglio di stile questo snippet di codice:

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance:none;
}
input[type=search] {
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
}

L'alternativa è rinunciare alla ricchezza semantica offerta da HTML5 e ricorrere ad un normale campo di testo come si è sempre fatto. A voi la scelta.

Il testo predefinito

Un'altra funzionalità molto interessante introdotta con HTML5 è quella relativa all'attributo placeholder. Tramite placeholder possiamo inserire all'interno di un campo un testo predefinito con il quale ad esempio suggerire all'utente la funzione del campo stesso:

<input type="search" placeholder="Cerca sul sito">

La particolarità e l'utilità del testo inserito tramite questo attributo è che scompare, lasciando spazio al testo inserito dall'utente, quando quest'ultimo inizia a scrivere (potete testarlo in questa demo).

Purtroppo l'attributo placeholder non è supportato da Internet Explorer. Si può comunque estendere la compatibilità sfruttando una delle tante soluzioni Javascript disponibili. Trovate le principali nella sezione 'Web Forms: input placeholder' di questa pagina della documentazione della libreria Modernizr.

Anche in questo caso un'alternativa basata su HTML 4.0 c'è. Invece che tramite placeholder inseriamo il testo predefinito con l'attributo value:

<input type="text" value="Cerca sul sito">

Volendo replicare la funzionalità del testo predefinito che scompare, basta un pizzico di Javascript:

<input id="s" name="s" value="Inserisci un termine" onfocus="if(this.value==this.defaultValue)this.value=''" />

Il markup degli esempi

Negli esempi che analizzeremo nel corso dell'articolo (ecco quello di partenza) abbiamo usato questo markup:

<label for="s" class="hide">Cerca sul sito</label>
<input type="search" id="s" name="s" placeholder="Cosa cerchi?">
<input type="submit" id="sub" name="sub" value="Cerca">

Abbiamo nascosto la label e normalizzato l'aspetto del campo di input su WebKit usando il codice CSS visto in precedenza.

Nella seconda parte dell'articolo vedremo come realizzare un campo di ricerca ad effetto 'incassato'.

Campo di ricerca con effetto 'incassato'

Iniziamo la nostra rassegna sugli stili per i moduli di ricerca con un piccolo effetto che di recente pare piuttosto popolare. Si tratta dell'applicazione sul campo di ricerca dell'effetto cosiddetto 'incassato' (inset in inglese), quello per cui l'input appare con un aspetto, per così dire, tridimensionale.

In realtà, tale è l'aspetto standard dei campi di testo a cui non vengano applicati stili autore (si veda il primo esempio). La profondità è data dallo stile dei bordi (inset) definito nel cosiddetto User Agent CSS. Ecco uno screenshot del Web Inspector di Safari che mostra gli stili calcolati per il campo di testo dell'esempio 1:

Per resettare l'aspetto dell'input e dei suoi bordi, basta inserire nel nostro CSS una dichiarazione che faccia riferimento alla proprietà border e che modifichi lo stile del bordo. Può essere

border: 0;

oppure

border: 1px solid #000;

o qualunque altra cosa, il risultato è lo stesso: il campo di testo perde i bordi incassati per default.

Ma se volessimo azzerare lo stile di default dei bordi e mantenere l'effetto 'incassato'? È quanto abbiamo fatto nel secondo esempio:

Per realizzare il tutto abbiamo usato la proprietà box-shadow e la sua parola chiave inset, grazie alla quale proiettiamo l'ombra verso l'interno dell'elemento invece che verso l'esterno. Abbiamo anche arrotondato gli angoli dell'input. Ecco il codice (riportiamo la parte rilevante, rimandando al sorgente per la definizione delle altre proprietà):

#s {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75) inset;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75) inset;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75) inset;
}

Questa invece è una variante con gli angoli meno arrotondati.

Per una resa ottimale dell'effetto sarà importante aggiustare al meglio non solo i valori di box-shadow, ma anche il contrasto cromatico con gli elementi circostanti. Ancora una variante per dimostrare come rende lo stesso campo su uno sfondo con gradiente grigio:

Aggiungere al campo l'icona della lente di ingrandimento

L'icona della lente di ingrandimento è ormai universalmente associata alla funzione di ricerca:

Nel design dei moduli di ricerca la troviamo adoperata in diversi contesti. Non di rado viene inserita all'interno del campo di testo, quasi a rappresentare una sorta di label grafica che chiarisce la funzione del form e dell'input.

Nell'esempio 3 abbiamo realizzato questo:

L'icona è stata aggiunta come sfondo del campo di ricerca:

#s {
width: 150px;
height: 28px;
padding: 0 28px;
background: white url("https://www.html.it/articoli/4002/lente.png") no-repeat 10px 8px;
}

Per inserire l'immagine in quella posizione abbiamo innanzitutto liberato un po' di spazio sulla sinistra del testo predefinito dando un padding sinistro di 28px all'input.

Poi abbiamo definito la proprietà background posizionando lo sfondo (la lente) con le coordinate 10px 8px.

Guadagnare spazio

Tutti gli esempi visti finora mantengono uno schema classico: il campo di testo per l'inserimento delle chiavi di ricerca è accompagnato da un pulsante per l'invio dei dati.

Due tendenze di design piuttosto comuni puntano però in due direzioni ben precise:

1. guadagnare spazio eliminando il pulsante di submit;
2. compattare il più possibile il campo e il pulsante fino a farli diventare una sorta di controllo unico.

Partiamo dal primo scenario.

Non è qui la sede per discutere delle implicazioni a livello di usabilità e accessibilità di una scelta per certi versi radicale come l'eliminazione del pulsante di submit. E sarebbe pure interessante fare un sondaggio per sapere da ciascuno di voi se ricorda l'ultima volta che ha cliccato su un bottone di invio per avviare una ricerca. Certamente, uno sviluppatore come Paul Irish, che conosce la tipologia di pubblico che frequenta il suo sito, ha potuto realizzare in questo modo il form di ricerca senza tanti patemi d'animo:

Niente pulsante. Nemmeno nel markup.

Una via di mezzo potrebbe essere quella di inserire comunque il pulsante nel codice, nascondendolo con la stessa tecnica vista per la label. Il risultato nell'esempio 4:

Mai come in questo scenario, comunque, va reso chiaro all'utente a cosa serve l'input di testo: l'icona qui non è solo decorativa!

Nell'esempio 5 una variante con la lente posizionata a destra:

Questo il codice CSS:

#s {
width: 250px;
height: 28px;
padding: 0 28px 0 10px;
background: white url("https://www.html.it/articoli/4002/lente.png") no-repeat 260px 8px;
}

Compattare i controlli

Come si accennava, un'altra tendenza è quella che punta a compattare i controlli (input di testo + pulsante).

Tra i tanti di esempi di form di ricerca che abbiamo valutato per questo articolo, alcuni presentano questa struttura (le tecniche per ottenere il risultato variano, ma non la sostanza):

Potete verificare il funzionamento nell'esempio 6.

Il form è solo in apparenza simile a quello visto in precedenza. La differenza sostanziale consiste nel fatto che nell'esempio 6 l'icona corrisponde al pulsante di submit, che è stato in pratica incorporato nel contesto del campo di testo.

Il codice CSS è naturalmente più complesso.

Dobbiamo infatti appoggiarci per ottenere il risultato al div che circonda i controlli del modulo:

<div id="ricerca">
<label for="s" class="hide">Cerca sul sito</label>
<input type="search" id="s" name="s" placeholder="Cerca sul sito">
<input type="submit" id="sub" name="sub" value="Cerca">
</div>

Per prima cosa procediamo ad azzerare il padding sul div #ricerca e a settare per esso un posizionamento relativo:

#ricerca {
padding: 0;
position: relative;
}

Definiamo le consuete regole per il campo di testo:

#s {
width: 280px;
height: 28px;
line-height: 18px;
padding: 0 10px;
background: white;
[...]
}

Nulla di particolarmente rilevante.

La parte importante è il codice per il pulsante:

#sub {
outline: none;
cursor: pointer;
width: 20px;
height: 20px;
padding: 0 10px;
border: 0;
border-left: 1px solid #faa53a;
background: url("https://www.html.it/articoli/4002/lente.png") no-repeat center;
text-indent: -10957px;
position: absolute;
top: 5px;
right: 5px;
}

Azzeriamo l'outline e impostiamo il cursore a manina, per prima cosa. Settiamo una larghezza e un'altezza. Un po' di padding (10px) a destra e sinistra.

Con border: 0 resettiamo l'aspetto di default del pulsante, ma poi, dato che vogliamo un piccolo bordo arancione sulla sinistra, inseriamo la regola per border-left.

Ora lo sfondo: sarà l'icona che abbiamo visto finora, centrata rispetto all'elemento.

Con text-indent: -10957px nascondiamo la scritta 'Cerca' definita nel markup come valore dell'attributo value. Ci ritroviamo così con un piccolo pulsante senza testo, ma con l'icona.

Infine il posizionamento assoluto. Che avverrà non rispetto al campo di testo, ma al div #ricerca che contiene i due controlli (un elemento può essere posizionato assolutamente solo rispetto a un suo contenitore). Un po' di prove per individuare i valori giusti per top e left e il gioco è fatto.

Anche in questo caso presentiamo una variante. Arrotondando con lo stesso raggio i bordi del campo e del pulsante (questa volta testuale) possiamo ottenere qualcosa del genere:

L'unica cosa sostanziale che cambia rispetto all'esempio base, oltre all'aspetto del pulsante, sono le coordinate del posizionamento.

Con questa tecnica e un pizzico di creatività grafica, si possono ottenere risultati interessanti:

Sempre in linea con la tendenza a compattare i controlli è quest'altra tipologia di form di ricerca. Due esempi possono bastare:

Si usa l'elemento contenitore (per lo più un div) per racchiudere i due controlli, che a loro volta vengono accostati senza lasciare spazio. Un uso accorto del colore di sfondo o del bordo dell'elemento contenitore sono il fattore chiave.

Ecco cosa abbiamo realizzato nell'esempio 7:

Nulla di eclatante a livello grafico. Badiamo al sodo spiegando la tecnica.

Fondamentale, come si accennava, il bordo esterno, che è definito sull'elemento contenitore:

div#ricerca {
padding: 0;
border: 1px solid #888;
width: 300px;
}

Un bordo sottile dello stesso colore viene definito anche per il lato sinistro del pulsante:

#sub {
width: 30%;
height: 28px;
padding: 0;
border: 0;
border-left: 1px solid #888;
background: #faa53a url("https://www.html.it/articoli/4002/lente_trasparente.png") no-repeat center center;
text-indent: -10957px;
box-sizing: border-box;
}

Per gestire al meglio le dimensioni in larghezza del pulsante e del campo all'interno del div, usiamo box-sizing: border-box;: in questo modo la larghezza reale comprenderà anche il padding e i bordi.

La stessa regola è stata adottata per l'input di testo, insieme a quella cruciale, ovvero float: left:

#s {
width: 70%;
height: 28px;
padding: 0 10px;
background: white;
border: 0;
float: left;
box-sizing: border-box;
}

Se vogliamo arrotondare anche leggermente i bordi, dovremo farlo sia sull'elemento contenitore sia sui controlli del form, come nell'esempio 7bis:

Riportiamo il codice per border-radius sui tre elementi (per la sintassi di questa proprietà rimandiamo alla Guida CSS3):

#ricerca {
border: 1px solid #888;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#s {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
#sub {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}

Nell'esempio finale abbiamo riunito un po' tutte le tecniche viste nel corso dell'articolo:

Per i dettagli implementativi si può fare riferimento al codice CSS delle varie demo, che sono tutte disponibili per il download.