Removing Safari’s native input highlight

  • 6 July

There are times when every web designer has to do the most shameful thing like faking an input filed in order to create a global order between browsers or, in some cases, simply making our dear friend IE happy.

Unfortunately it’s not IE which is causing oddities this time – in particular it is Safari itself. Basically what happens is that Apple with all it’s glory and details for a proper user experience is adding a special form of highlighting for every active/focused form widget – many came across and some are upset about the fact that it’s making impossible to create complete custom styles for the highlighted elements:

But in reality there is a way of re-styling these fields. The custom highlight can be achieved by using the outline property.

So, doing a simple outline: none will result in the blue glow being removed altogether:

Of course this solution is against all usability guidelines since we’ve just deleted the only thing indication of field being focused. Still, it’s never lupus…

More f-ups:

86 responses so far. Care to add one yourself?

  1. 9gods July 6th, 2008 at 20:25

    • Yeah, House MD rules!

  2. Tadd Giles September 26th, 2008 at 02:15

    • Thanks much! Needed that.

  3. 10 Autumn Website Reboot Essentials | Urban Mainframe October 12th, 2008 at 23:04

    • [...] forms, looking particularly grim on non-rectangular designs (and blue is not an autumn colour). The Removing Safari’s Native Input Highlight tutorial eases your pain by explaining how to remove the blue glow, remember to provide an [...]

  4. Kian Ann July 11th, 2009 at 02:52

    • Awesome tip. Just what I needed. Thanks a lot!

  5. Kian Ann July 11th, 2009 at 02:52

    • BTW, it works for Chrome as well

  6. MSXROCKS August 12th, 2009 at 15:53

    • Thanks much too. It was tricky to ask the good question to google. And thanks Kian for the chrome info.

  7. Gareth August 24th, 2009 at 16:23

    • Nice fix. Strangely, on occassions I’ve wanted to replicate Safari’s highlight method in other browsers (Firefox, IE, etc). But on this occassion I’m working on a project where a search box is custom styled using background images and such like, and the blue tinge highlight in Safari is ruining the look and feel!

  8. @rhypae September 17th, 2009 at 15:39

  9. @rhypae September 17th, 2009 at 15:39

  10. @rhypae September 17th, 2009 at 15:39

  11. @rhypae September 17th, 2009 at 15:39

  12. @rhypae September 17th, 2009 at 15:39

  13. @rhypae September 17th, 2009 at 15:39

  14. @rhypae September 17th, 2009 at 15:39

  15. @rhypae September 17th, 2009 at 15:39

  16. @rhypae September 17th, 2009 at 15:39

  17. @rhypae September 17th, 2009 at 15:39

  18. @rhypae September 17th, 2009 at 15:39

  19. @rhypae September 17th, 2009 at 15:39

  20. @rhypae September 17th, 2009 at 15:39

  21. @rhypae September 17th, 2009 at 15:39

  22. @rhypae September 17th, 2009 at 15:39

  23. @rhypae September 17th, 2009 at 15:39

  24. @rhypae September 17th, 2009 at 15:39

  25. @rhypae September 17th, 2009 at 15:39

  26. @rhypae September 17th, 2009 at 15:39

  27. @rhypae September 17th, 2009 at 15:39

  28. @rhypae September 17th, 2009 at 15:39

  29. @rhypae September 17th, 2009 at 15:39

  30. @rhypae September 17th, 2009 at 15:39

  31. @rhypae September 17th, 2009 at 15:39

  32. @rhypae September 17th, 2009 at 15:39

  33. @rhypae September 17th, 2009 at 15:39

  34. @rhypae September 17th, 2009 at 15:39

  35. @rhypae September 17th, 2009 at 15:39

  36. @rhypae September 17th, 2009 at 15:39

  37. @rhypae September 17th, 2009 at 15:39

  38. @rhypae September 17th, 2009 at 15:39

  39. @rhypae September 17th, 2009 at 15:39

  40. @rhypae September 17th, 2009 at 15:39

  41. @rhypae September 17th, 2009 at 15:39

  42. @rhypae September 17th, 2009 at 15:39

  43. @rhypae September 17th, 2009 at 15:39

  44. @rhypae September 17th, 2009 at 15:39

  45. @rhypae September 17th, 2009 at 15:39

  46. @rhypae September 17th, 2009 at 15:39

  47. @rhypae September 17th, 2009 at 15:39

  48. @rhypae September 17th, 2009 at 15:39

  49. @rhypae September 17th, 2009 at 15:39

  50. @rhypae September 17th, 2009 at 15:39

  51. @rhypae September 17th, 2009 at 15:39

  52. @rhypae September 17th, 2009 at 15:39

  53. @rhypae September 17th, 2009 at 15:39

  54. @rhypae September 17th, 2009 at 15:39

  55. @rhypae September 17th, 2009 at 15:39

  56. @rhypae September 17th, 2009 at 15:39

  57. @rhypae September 17th, 2009 at 15:39

  58. @rhypae September 17th, 2009 at 15:39

  59. @rhypae September 17th, 2009 at 15:39

  60. @rhypae September 17th, 2009 at 15:39

  61. @rhypae September 17th, 2009 at 15:39

  62. @rhypae September 17th, 2009 at 15:39

  63. @rhypae September 17th, 2009 at 15:39

  64. @rhypae September 17th, 2009 at 15:39

  65. @rhypae September 17th, 2009 at 15:39

  66. @rhypae September 17th, 2009 at 15:39

  67. @rhypae September 17th, 2009 at 15:39

  68. @rhypae September 17th, 2009 at 15:39

  69. @rhypae September 17th, 2009 at 15:39

  70. @rhypae September 17th, 2009 at 15:39

  71. @rhypae September 17th, 2009 at 15:39

  72. @rhypae September 17th, 2009 at 15:39

  73. @rhypae September 17th, 2009 at 15:39

  74. @rhypae September 17th, 2009 at 15:39

  75. @rhypae September 17th, 2009 at 15:39

  76. @rhypae September 17th, 2009 at 15:39

  77. @rhypae September 17th, 2009 at 15:39

  78. @rhypae September 17th, 2009 at 15:39

  79. @rhypae September 17th, 2009 at 15:39

  80. @rhypae September 17th, 2009 at 15:39

  81. @rhypae September 17th, 2009 at 15:39

  82. @rhypae September 17th, 2009 at 15:39

  83. @rhypae September 17th, 2009 at 15:39

  84. @rhypae September 17th, 2009 at 15:39

  85. @rhypae September 17th, 2009 at 15:39

  86. Tom March 11th, 2010 at 15:21

    • I don’t necessarily want to remove what Safari users may have become used to having. I’m having a problem with the highlight only appearing on 2 or 3 sides of some inputs, though. It’s possible my containers are too tight, but that’s the design, and I shouldn’t have to change it to accommodate Apple’s little blue box.

Leave a Reply

Fill-in all the forms

Categories

Recent Tweets

  •  

Current bookshelf