modifiche search box

[web0x]

Salve a tutti non so se postare questa discussione nella sezione html o css quindi la poster� in entrambe e aspetto che qualche moderatore mi faccia sapere cosa devo fare la prossima volta. Allora vi spiego, ho da poco scaricato una piattaforma dal nome vbulletin dove � presente un search box che vorrei personalizzare in quanto attualmente non mi soddisfa. Mi sarebbe molto utile se qualcuno di voi mi potesse aiutare. Ho trovato molti esempi nel web ma ho paura di commettere qualche sbaglio che magari possa "rompere" il codice. Vorrei ottenere un search box simile all'allegato che inserisco.
In pratica, come vedete dall'allegato vorrei l'input a sinistra (del testo) con il testo all'interno che sparisce appena ci clicchi per digitare la ricerca e il pulsante affiancato a destra con l'icona di ricerca che vorrei aggiungere con fontawesome (la libreria delle icone web) e quindi rimuovere il type image con il codice dell'immagine. Ho inoltre bisogno dei codici css fatti ad hoc per il search box modificato. (Se potete aiutarmi posso valutare anche di pagarvi il lavoro anche se non sembra particolarmente difficile)
Poi ho notato che il codice ha nei div sia il div id che il div class come mai contiene tutti e due? Non � meglio utilizzare solo l'id o il class? Quale � meglio dei due?
Ah dimenticavo il codice html del search box � questo:

<vb:if condition="$vboptions['enablesearches']">
        <div id="globalsearch" class="globalsearch">
            <form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
                <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="process" />
                <input type="text" value="" name="query" class="textbox" tabindex="99"/>
                <input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/>
            </form>
        </div>
    </vb:if>

Attendo riscontro, grazie.
searchbox.jpg