How do I add a “search” button in a text input field?

Question

How do I create a similar “search” element to the one in this site?

If

Answer 1

Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.

What you need to do is add a wrapper div around the input:text and input:submit

The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements

It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.

EDIT: you can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.