1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Lack of Interest Show Search-icon

Discussion in 'Closed Suggestions' started by erich37, Jan 21, 2014.

  1. erich37

    erich37 Well-Known Member


    Show Search-icon

    this will make it more intuitive for the user to see the "Search Box".




    Last edited: Jan 21, 2014
    wedgar and Mouth like this.
  2. Daniel Hood

    Daniel Hood Well-Known Member

    What browser do you use? I see an icon in chrome. It's on the left side of the box though. I'm guessing it depends on how browsers treat input type="search"
    erich37 likes this.
  3. erich37

    erich37 Well-Known Member

    I am using FireFox 26.0 and it does not show any icon.
    The icon is also not showing in Internet-Explorer.

    The icon only shows up when in "mobile-phone"-view (responsive).
  4. Jeremy

    Jeremy Well-Known Member

    Chrome shows a search icon.
    erich37 likes this.
  5. erich37

    erich37 Well-Known Member

    maybe we can get K+M to figure out to show it for other browsers (besides Chrome) as well ?

    Generally speaking, the "search-icon" should be at the "right-hand-side" of the Search-box (see Examples in the first post of this thread).
    You either hit "Enter" on your keyboard or you click onto the icon in order to submit your search.

    Last edited: Jan 21, 2014
  6. bobs409

    bobs409 Active Member

    Firefox 26 here too and no icon on my forum either. It's just a box with the word Search in left side (never noticed it before)
    erich37 likes this.
  7. TLMD

    TLMD Active Member

    I can confirm that. I don't see the search icon on this site (nor on any XF site I have visited so far). However, I also haven't noticed that so far. :p
    erich37 likes this.
  8. erich37

    erich37 Well-Known Member

    can we move this into the "Bugs Forum" then ?
  9. Daniel Hood

    Daniel Hood Well-Known Member

    I doubt it, it's not really a bug.

    http://www.w3schools.com/html/html5_form_input_types.asp scroll down to search. Currently it only does the magnifine glass icon in Chrome and Safari. I'm sure Firefox and IE will adapt eventually. If they 'fixed' it by adding an icon on the right side, it'd result in double icons for Chrome and Safari users.

    Here's a screenshot of what I see with Chrome and I assume it's close to the same within Safari.

  10. erich37

    erich37 Well-Known Member

    are you saying Google and Pinterest (as per my examples in the first post of this thread) are showing double icons for Chrome and Safari users ?

  11. Daniel Hood

    Daniel Hood Well-Known Member

    <input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;" dir="ltr" spellcheck="false">
    <input type="search" name="keywords" value="" class="textCtrl" placeholder="Search..." results="0" title="Enter your search and hit enter" id="QuickSearchQuery">
    I am not saying they are showing double icons, this has nothing to do with those two sites.
    I am saying XenForo uses <input type="search" which automatically adds the search icon for Chrome and Safari users and I'm sure Firefox and Internet Explorer will pick it up in the future.

    [edit] http://stackoverflow.com/questions/11589770/input-type-text-vs-input-type-search-in-html5
  12. Pereira

    Pereira Well-Known Member

    The field uses whatever the default browser styling for a "search" input is. The magnifying glass won't appear in IE for example because it doesn't style search boxes in the same way Chrome does.
  13. Slind

    Slind Active Member

    It is also with Opera visible
  14. erich37

    erich37 Well-Known Member

    in summary:

    some browsers are not yet HTML5-compatible regarding interpreting input type="search"

    Maybe we can have a workaround for this.

Share This Page