Show Search Image over a Textbox

Question

You've probably seen fancy search boxes before (like the one on the jQuery API) where they have a clickable search icon that appears over the textbox. How can I semantically achieve this effect?

I have seen on some custom Google Search textboxes that it uses a background image on the textbox, and then it receives focus and removes the image. Also, the search box here on StackOverflow appears to also be using a background image of a little search icon. I know how to do that, it is easy, but it's not really the effect I want. I'd like to have a clickable icon that lights up on hover and submits the form when clicked.

Answer 1

Absolutely position a link tag over the right side of the textbox, and style it with a transparent PNG background. Attach code to the link's click event to find and submit the form. Trivial if you're using a 3rd party Javascript library like jQuery.

Answer 2

Another way to accomplish this is to place an relatively positioned submit button on top of the search input (with padding on the search input to keep the text from running under the search image. Then give your button a hover state and you are all good to go.

Answer 3

You can skin the submit button of the form and position it using css. That is a bit tricky do get it working on all browsers, but it is possible..

Answer 4

Use some HTML similar to this (where ... means put in the appropriate attributes you need for your form):

<form id="search" ...>
    <input type="text" ...>
    <button></button>
</form>

Then with CSS, set position: relative on the form element and position: absolute; right: 0 on the button. Set a background image on the button and use text-indent: -9999em to hide the button's text off-screen.

If you want to emulate jQuery's solution more closely, I suggest installing Firebug for Firefox and inspecting the element's HTML and CSS yourself.