• Home
• Didattica
• Download
• News
• Blog
• Tools
• Forum
• Altro...

Corsi on-line

• Altri canali:
• Hosting
• Web Grafica
• Toolbox
• WMDir.it

Un form di ricerca in stile BING

Grazie ai soli CSS possiamo stilizzare il form di ricerca del nostro sito in stile BING, il noto motore di ricerca, la cui casella di testo (e relativo bottone di submit) si presenta cosi:

Naturalmente, guardiamo solo la casella di testo ed il bottone, e non l'immagine di sfondo, che esula dagli scopi di questo articolo.

Iniziamo a creare il nostro form:

<form name="modulo">
<div id="search_txt"><input type="text" name="testo"></div>
<div id="search_sub"><input type="image" src="cerca.jpg"></div>
</form>

Il nostro form di ricerca, alla fine, apparirà cosi: Inseriamo la casella di testo ed il bottone di submit (di tipo image, che richiama quindi un'immagine) in due livelli di testo, ai quali assegniamo un differente ID.

Iniziamo con lo stilizzare gli elementi di base della pagina:

body
{
    background: #FFFFFF;
    color: #000000;
    margin: 25px 25px 25px 25px;
}
input
{
    color: #000000;
    font-size: 13px;
    font-family: verdana;
}
form
{
    margin: 0px 0px 0px 0px;
}

Creiamo adesso due immagini, logo.jpg e cerca.jpg, rispettivamente di dimensioni 60X20 pixel e 20X20 pixel, come le seguenti, personalizzandole a nostro gusto: Stilizziamo adesso i due livelli di testo:

#search_txt
{
    float: left;
    width: 250px;
    padding: 5px 0px 5px 5px;
    border-top: solid 1px #000000;
    border-left: solid 1px #000000;
    border-bottom: solid 1px #000000;
}
#search_sub
{
    float: left;
    text-align: right;
    background-image: url(logo.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    width: 100px;
    padding: 5px 5px 5px 0px;
    border-top: solid 1px #000000;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
}

Per prima cosa li affianchiamo e li dimensioniamo, gestendo poi il padding ed i bordi. La casella di testo che ospiterà l'immagine di submit, inoltre, imposterà come sfondo il logo che abbiamo creato.

In fine, stilizziamo la casella di testo, eliminando il bordo ed impostando la larghezza massima in percentuale:

#search_txt input
{
    width: 100%;
    border: none;
}

Tutto qui!