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:


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


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

input:focus {
  outline: none;


There you go! Simple but very efficient.