CODEWITHSUNDEEP
javascripthtmlcss
AFG
AFG

Reputation: 1715

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?

Upvotes: 10

Views: 49347

Answers (5)

alex
alex

Reputation: 490479

You can use the new input types for that.

<input type="search" placeholder="Search" results="0" />

The 'results' attribute will add the magnifying glass icon in WebKit browsers.

UPDATE: No longer working in FF, Chrome, or Edge in 2021.

Upvotes: 3

LifeLongLearner
LifeLongLearner

Reputation: 1

USE THIS: <input type="image" src="/_i/mag.png" alt="Search">

EXAMPLE CODE:
<form class="form-inline my-2 my-lg-0">
  <input type="image" src="data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path></svg>" alt="Search">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

Upvotes: 0

Tom
Tom

Reputation: 681

There are multiple elements involved.

Use Chrome DevTools (F12) to inspect these things.

Upvotes: 20

Jeremy B.
Jeremy B.

Reputation: 9216

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

Upvotes: 4

Craig Stuntz
Craig Stuntz

Reputation: 126587

View -> Page source.

Seriously, it's all there.

Upvotes: -6

Related Questions