For the sake of others who may come lurking into this thread, I wish to mention that I updated my code today to eliminate the second inline SVG, making the code a tad more compact.
Originally I used a gray magnifier icon as the normal state and a white one as the rollover (focus) state. But I realized I could eliminate one SVG by simply leveraging opacity in the CSS. However, it took a little time to work out the kinks. For some reason, Safari and Chrome (Webkit) were fading the placeholder text, while FireFox and IE/Edge were not. (Actually, FF usually fades the placeholder text, but using the opacity attribute set to 1.0 fixes that, but doing the same would not fix Webkit.) The fix was for me to simply reorder the first three lines of the CSS. Instead of having the “input::-webkit-input-placeholder” line first, I put it third, beneath the 2 Mozilla lines, and magically (again, I don’t know why) Safari and Chrome stopped fading my placeholder text and now it looks the same across all browsers.
Here’s my updated Fiddle:
Since the SVG I use is an inline background-image, to ensure cross-browser compatibility, I used the following SVG encoder:
http://yoksel.github.io/url-encoder/
You can download the original unencoded SVG from my website here (it’s WHITE so you can’t see it in-browser):
https://kiramek.com/SearchMagWHT.svg
Also note that if you Minify the CSS, you cannot Minify the SVG code or it won’t display. So just Minify all your CSS here:
Then replace the SVG part of the minified code with the unmagnified (but encoded) SVG. And yes, if you’re wondering, you can still shave off a fair amount from your code if you Minify and use GZIP on your web server. It isn’t a lot, but sometimes every little bit counts.
I tested this JS/CSS combination in all modern browsers on Windows and Mac, as well as in iOS. It works well, I think.
Best wishes,
James Wages
dynamo mailing list
email@hidden
Update your subscriptions at: