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

Please keep in mind that removing the default outline styles should always be used with caution and adding an alternative styling is mandatory.

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