CSS Tricks’ Search bar

[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

Code:

and its css

Code:

#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

Code:

and its css

Code:

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

[Author]

Posts