how did you put the magnifying glass and "search" in the search box in stackoverflow?

Question

Assuming it is possible with just CSS...but wanted to know if someone could share the code.

Guessing magnifying glass is background image, but need javascript to remove "search" on focus.

Also...how do you get it to submit when hitting "return" rather than needing a "search" submit button?

Thanks!

Answer 1

View -> Page source.

Seriously, it's all there.

Answer 2

If you look at with firebug you would see the image is not inside the search field.

This can explain it better than me. http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/

Answer 3

few questions there:

1. Submit on return, if you put an input in a form, and have focus on said input, when you press enter the browser will by default submit the form.

2. Text masking. you can do this easily in jquery or any other framework. essentially you will remove the text "search" on focus, but only that text so if there was something like "foo" it would not replace it.

for your text masking needs: text mask

Answer 4

#hsearch .textbox {all.min....ss?v=2743 (line 1)
    background:transparent url(http://i.stackoverflow.com/Content/Img/search.png) no-repeat scroll left center;
    margin:0;
    max-width:230px;
    padding-left:16px;
}

...is the CSS selector for:

<input name="q" class="textbox" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search">

I would recommend getting the Firebug addon for Firefox. It will make your life much easier.