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.

safari-blue-outer-glow

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.

Written by Red

Catalin Red is a web designer/developer who loves to be creative and enjoys experimenting various web techniques. Check out Red's tutorials and articles at red-team-design.com or follow him on Facebook or Twitter.

2 Responses to “Get rid of Safari’s blue input outer glow once and for all”

  1. Steve says:

    i am doing a website for a client and have a spry collapsible panel which has the same blue focus line around the ‘focussed panel’ in Safari. As this is not an input field what css would i use to remove it? Any help appreciated

  2. Red says:

    Generally “outline:none;” to a focused element removes the blue stroke, not only for an input but the input case is the most encountered.

Leave a Reply