Grow your CSS skills. Land your dream job.

Integrate Search Button Into Input Field

  • # June 5, 2009 at 10:16 pm

    What is the best way to implement a search button (such as a magnifying glass or just the word "Search") into your input field? Just like the search box on CSS-Tricks…

    Does the icon or button have to be manually placed and positioned in the input field?

    # June 6, 2009 at 6:47 pm

    To answer your question (and a lot of other "How’d they do that?" Questions) : It’s not how it seems. They made it looks like that’s what happening, but it’s not.

    In this case Chris made it look like the button is inside of the search field. If you keep typing into the search field, you’ll notice that your text never reaches the "submit button"

    He’s got the background image that has the outline of the search box:
    [img]http://css-tricks.com/images/bg-header-middle-forums.png[/img]
    Then he put an "input" field with no borders or background color.
    The Submit buttons is just a normal <input typle="image"> that submits the form

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

You must be logged in to reply to this topic.

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