The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Integrate Search Button Into Input Field

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #25058

    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?


    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:
    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)
  • The forum ‘CSS’ is closed to new topics and replies.