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

    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;
    }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".