Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 576
AFG Avatar asked Apr 02 '09 20:04

AFG


People also ask

Why is the Search icon a magnifying glass?

The magnifying-glass icon saves space, so more websites use it. It's OK to be flexible with previous guidelines, so long as we acknowledge that the users' needs remain unchanged. People don't care what the search area looks like: they just want a place where they can quickly go to type in their search query.

How do I get the magnifying glass off my iPhone?

Quickly access Magnifier To quickly open Magnifier: On an iPhone X and later, or iPad without a Home button: Triple-click the Side button. Then drag the slider to adjust the magnification level. To close Magnifier, swipe up from the bottom of your screen.


2 Answers

There are multiple elements involved.

Use Chrome DevTools (F12) to inspect these things.

like image 58
Tom Avatar answered Oct 19 '22 02:10

Tom


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

like image 42
Jeremy B. Avatar answered Oct 19 '22 04:10

Jeremy B.