Treehouse: Grow your CSS skills. Land your dream job.

CSS Tricks’ Search bar

  • # September 4, 2009 at 4:38 am

    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 :)

    # September 4, 2009 at 2:48 pm

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

    # September 5, 2009 at 3:24 pm

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

    Here is the text input box


    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


    and its css

    #search-button, #search-button-f, #search-button-a {
    border:medium none;
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.