206

Currently it looks like this:

Current

With a slight CSS modification, it would look like this:

Modified

Notice the icon is now vertically aligned with the prompt. Also, this behavior would be uniform across Mac and Windows, Chrome and Firefox.

CSS changes:

Before:

Before

After:

After

23
  • 52
    I suggest you to use Freehand Circles.
    – A.L
    Commented May 2, 2016 at 9:38
  • 4
    While your modified image might be geometrically centred, your eyes and brain might not perceive it to be so. This is an issue which leads to overshooting text in typography.
    – Matsmath
    Commented May 2, 2016 at 10:22
  • 111
    Does this make you nervous?
    – user1228
    Commented May 2, 2016 at 15:00
  • 2
    @Matsmath my brain perceives it as so Commented May 2, 2016 at 16:36
  • 13
    Are you really asking a "Why not" discussion question or are you reporting a bug?
    – TylerH
    Commented May 2, 2016 at 16:42
  • 90
    I never noticed this until now.. Now I'm going to see it every time I use the search box :-( Commented May 2, 2016 at 16:55
  • 15
    Not positioning things correctly is a bug. Commented May 2, 2016 at 16:56
  • 32
    I cannot unsee it now. Thanks a lot! >: |
    – user3995702
    Commented May 2, 2016 at 17:13
  • 1
    Your suggestion is at least one px too high. If the placeholder text contained letters like “g” or “p”, it would also be visually too high. Commented May 2, 2016 at 17:13
  • 3
    I've never noticed it before. Now I'm having tickles on it.
    – Machado
    Commented May 2, 2016 at 17:57
  • 2
    @Will meta.stackoverflow.com/posts/322196/revisions this will answer your question.
    – paradite
    Commented May 2, 2016 at 20:45
  • 1
    Careful, I hear a giant S is coming your way to beat you in the head. Commented May 2, 2016 at 21:40
  • 2
    The position of the icon is clearly referring to early detective movies where the detective searching for clues would actually be looking at the ground through a magnifying glass.
    – MeanGreen
    Commented May 3, 2016 at 9:11
  • 1
    Do we need the icon AND the text "Search Q& A"?
    – j08691
    Commented May 3, 2016 at 16:13
  • 1
    It's a delightful bit of free-hand artfulness in an overly-correct world. Roosevelt's unpublished Fifth Freedom was "Freedom from excessive focus on alignment and margins and sh*t like that". LEAVE THE SEARCH ICON ALONE!!!!! :-) Commented May 4, 2016 at 17:03

2 Answers 2

7

This issue has been corrected. This will be updated with the next production build. Thanks for your patience.

3
  • Looks like the live site is already fixed as of now.
    – paradite
    Commented May 5, 2016 at 22:55
  • Hmm - The search box seems to have become a bit bigger now, and has a light gray background, was that intentional ? I think it looks slightly ugly. Commented May 6, 2016 at 7:36
  • @JonasCz It was intentional. The background is slightly dimmed since it's up in the right corner and not a primary action for most pages. When you focus on the search box, it turns full white though.
    – Hynes StaffMod
    Commented May 6, 2016 at 12:32
45

How about removing the CSS background and using one of the Unicode magnifiying glasses in the placeholder:

<input type="text" placeholder="🔍 Search Q&A" style="width: 188px;">

Advantage. Less code, less CSS, also auto-hides the icon once you start typing which leaves more space for typing.

15
  • 18
    Disadvantage: Doesn't render correctly on Chrome on Linux (apparently): i.sstatic.net/kl7vP.png (Using a pretty uncustomized install.) Commented May 3, 2016 at 6:03
  • 4
    And the unicode causes the placeholder to appear awkwardly low in the input box. Normal text appears neatly vertical aligned though.
    – Abhitalks
    Commented May 3, 2016 at 6:07
  • ^ The difference: i.imgur.com/c4zzlR6.png
    – Abhitalks
    Commented May 3, 2016 at 6:13
  • 2
    As for Linux. That's a bug in Chrome or Linux which will get fixed otherwise Linux will be left behind as the rest of the internet moves on using emoji everywhere. As for awkwardly low, to me your non-emoji example is awkwardly high with double the space below the characters as above. I think you'll also find that every OS/browser combination is different with or without the emoji. Here's a few quick tests
    – user128511
    Commented May 3, 2016 at 7:08
  • This does not properly render for me either (I suspect that this have to do with not having latest version of Microsoft Windows ©, rather then specific browser). According to stackoverflow.com/q/12036038/1643723, the same thing can be accomplished with other, less obscure symbols, such as . And personally I'd use a webfont to prevent unexpected rendering depending on whatever is installed on user's system. Commented May 3, 2016 at 8:50
  • 9
    Very likely that these render problems are all due to font support of the glyph. And unless there is a font that works across browsers/OS combinations I don't think it would be a good choice for SE to implement. Commented May 3, 2016 at 9:48
  • 5
    Broke in ubuntu firefox: i.sstatic.net/9HwHw.png, broke in chrome as well. So this is not a chrome bug or anything. "otherwise Linux will be left behind" - wtf? there are other ways to align something properly that works in all platforms. You can't put stuff like this in production.
    – T J
    Commented May 3, 2016 at 11:06
  • I'd rather have a misaligned search icon than misaligned very weird things that doesn't make sense...
    – T J
    Commented May 3, 2016 at 11:18
  • 2
    Works great on Ubuntu 16.04 with Chrome 51. Commented May 3, 2016 at 12:04
  • 22
    Go the whole hog, and use <input type="search" ...> Commented May 3, 2016 at 15:51
  • @RaphaelMiedl well, there is icomoon.io. Icons like fonts, and they work in all OS and browsers.
    – bns
    Commented May 3, 2016 at 16:57
  • @T.J.Crowder, I confirm it works ok with Chrome on Ubuntu 16.04 (x86_64) too. Perhaps you meant Chromium (which I haven't tried)?
    – Shahbaz
    Commented May 4, 2016 at 3:05
  • 1
    @Shahbaz: Nope. I'm using Chrome (not Chromium) on Linux Mint 17.3. But I just tried Chromium and Firefox, didn't work in either of those, either, so probably OS rather than browser. Commented May 4, 2016 at 5:14
  • @Shahbaz it's broke in Ubuntu 14.04.4 firefox and chrome.
    – T J
    Commented May 4, 2016 at 16:56
  • 3
    -1 Conclusion: it's a terrible idea as it doesn't work correctly in a large number of browsers + OS combinations, so please downvote. Commented May 5, 2016 at 0:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .