How do you put the magnifying glass and "search" in the search input box, like in StackOverflow?

Question

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

Guessing the magnifying glass is a 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?

Answer 1

There are multiple elements involved.

Use Chrome DevTools (F12) to inspect these things.

Answer 2

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