locked
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?


    • Edited by hssint Tuesday, March 13, 2012 10:24 AM
    Tuesday, March 13, 2012 10:24 AM

Answers

  • 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)

    Wednesday, March 14, 2012 2:54 PM
    Moderator

All replies

  • 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)

    Tuesday, March 13, 2012 5:33 PM
    Moderator
  • 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 :)
    Tuesday, March 13, 2012 7:17 PM
  • 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.
    Wednesday, March 14, 2012 9:10 AM
  • 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)

    Wednesday, March 14, 2012 11:40 AM
    Moderator
  • 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?
    Wednesday, March 14, 2012 1:27 PM
  • 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)

    Wednesday, March 14, 2012 2:54 PM
    Moderator
  • 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.
    Friday, March 16, 2012 8:32 AM