Search input with magnifying glass

Question

Hi

I want a HTML5 search input box where I use a magnifying glass in the search box itself instead of a search button next to the search input. Is this possible with the new HTML5 features?

Answer 1

Hi H,

I am not sure I understand.  Do you simply mean you want a picture of a magnifiying class to click on?  You could certainly do that!

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Also note that if it's a search of your app the better experience would be to do a search contract with the search charm. It's built into Windows 8 for a reason, for us to use :)

Answer 3

Hi H,

I am not sure I understand.  Do you simply mean you want a picture of a magnifiying class to click on?  You could certainly do that!

-Jeff

---

Jeff Sanders (MSFT)

Is this the only solution? Or is there an option for the search input where it has an magnifiying glass in it. I searched the Internet, but I couldn't find anything.

Answer 4

I am sorry, I have no idea what you are asking for.  Perhaps if you have a mock up or picture to describe what you are asking for?

---

Jeff Sanders (MSFT)

Answer 5

I am sorry, I have no idea what you are asking for.  Perhaps if you have a mock up or picture to describe what you are asking for?

---

Jeff Sanders (MSFT)

I'll ask it another way. When you type something into a search box, the clear sign (X) appears in this search box. Can I replace this clear sign by a magnifiying glass, which I have to hit after I typed in a word? Is there an option for it, or can I do it by replacing the clear sign by a picture?

Answer 6

Thanks for the explanation.

In short, no you cannot get rid of the X in the input.  This is part of the input control now.  However you can have a similar search experience that the msdn search gives you here:  http://msdn.microsoft.com/en-us/windows

To see how they do this, simply hit F12 in the Desktop IE 10 and use the Select Element by Click icon (ctrl+b) and highlight the entire select box along with the search box (Search Dev Center with Bing in the top right corner).  This should give you a good idea how you can implement something similar in your app.

-Jeff

---

Jeff Sanders (MSFT)

Answer 7

Thanks for the explanation.

In short, no you cannot get rid of the X in the input.  This is part of the input control now.  However you can have a similar search experience that the msdn search gives you here:  http://msdn.microsoft.com/en-us/windows

To see how they do this, simply hit F12 in the Desktop IE 10 and use the Select Element by Click icon (ctrl+b) and highlight the entire select box along with the search box (Search Dev Center with Bing in the top right corner).  This should give you a good idea how you can implement something similar in your app.

-Jeff

---

Jeff Sanders (MSFT)

Thank you. I'll give it a try.