Grow your CSS skills. Land your dream job.

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

    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

    Code:

    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

    Code:

    I hope this helps.

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".