The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS-Tricks Searchbar

  • # February 17, 2010 at 7:29 pm

    Hey there,

    I wanted to know how to achieve something similar to the CSS-Tricks search-bar above (top-right of the site).

    I’d like to know how to:

    – Achieve the shape of the search-bar
    – Keep the "submit" button inside the search-bar
    – In the search-bar it displays the word "Search…", once you click on the search-bar the word "Search…" disappears and allows you to type your search, how would one achieve this

    Thanks in advance

    # February 18, 2010 at 5:16 am

    This reply has been reported for inappropriate content.

    I will briefly try and answer these for you. The search ‘box’ actually has no styling on it at all, it is contained within a div that has the background set to an image which is the shape that you see. The input box is then placed over the top with all background and borders removed, giving the effect that the div background belongs to the search box.

    From the above, I can tell you that the search button is not inside the input box, but rather inside the same div

    Lastly, the onfocus javascript effect is something like this


    Not tested this code, but think it is about right. Someone else can correct me!

    # February 19, 2010 at 12:07 pm

    Personally i would use


    I hope this helps.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed