Get rid of Safari's blue input outer glow once and for all

When you're building web interfaces or just websites you always need to do cross-platform browser testing. As we saw, inputs inherits different styles from browsers and you need to style them. In this article i will show you how simple is to remove Safari's glowing blue outline.

The normal state of our input looks like this:

safari-blue-outer-glow-state

Please notice the effect that appears on input focus(we're talking about Mac OS X browser-Safari):

safari-blue-outer-glow-state2

To remove this annoying input effect we just need to add one css line and it will disappear:

input:focus {
  outline: none;
}

safari-blue-outer-glow-state3

There you go! Simple but very efficient.

Share this on: TwitterGoogle+Facebook