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?
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.
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.
There are multiple elements involved.
Use Chrome DevTools (F12) to inspect these things.
few questions there:
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With