• 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

Daniel Hood

Well-known member
#2
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

Well-known member
#3
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"
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).
 

erich37

Well-known member
#5
Chrome shows a search icon.
hmm....
maybe we can get K+M to figure out to show it for other browsers (besides Chrome) as well ?



It's on the left side of the box though.
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:

TLMD

Active member
#7
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
 

Daniel Hood

Well-known member
#9
can we move this into the "Bugs Forum" then ?
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.

SearchIcon.png
 

Daniel Hood

Well-known member
#11
Google
Code:
<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">
XenForo
Code:
<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
 

Pereira

Well-known member
#12
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.
 

erich37

Well-known member
#14
in summary:

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

Maybe we can have a workaround for this.