Forums

mshort

Hi Everyone,

I was wondering if anyone could possibly shed some light on how the search bar on CSS Tricks was done? it looks awesome.

Thanks :)

Norman

its one background image, a transparent input and one input with the magnifier :)

Sumeet Chawla

To make things short I will just paste the code itself :P

Here is the text input box


<input id=\"s\" type=\"text\" value=\"Search...\" name=\"q\" style=\"border: 1px solid rgb(126, 157, 185); padding: 2px;\"/>

and its css


#cse-search-box #s, #cse-search-box #s[style], #s-forums {
    background:transparent none repeat scroll 0 0 !important;
    border:medium none !important;
}

Here is the search button input


<input id=\"search-button\" type=\"image\" value=\"Search\" name=\"sa\" alt=\"search\" src=\"/images/mag.png\"/>

and its css


#search-button, #search-button-f, #search-button-a {
    border:medium none;
    color:white;
    vertical-align:middle;
}

treehouse : what would you like to learn today?

Forums

CSS Tricks' Search bar