Removing the Glowing Halo Around Safari Text Inputs

On the whole, I generally prefer the way Safari renders and handles native form elements over that of most major browsers. One minor annoyance I’ve run into is that text inputs that are applied a custom style are still given a glowing halo-effect when focused. This is usually the desired effect since it is a huge visual aid to the user. Sometimes though, it gets in the way of custom styling and it’s necessary to turn it off. Here’s the relevant CSS to do so:

input { outline: none; }

(Hat tip to Artwork.Not.Available.)

Find This Article Useful?

• Share/Save This Entry

Related Articles

• Extend CSS With Variables, Mixins, Operations and Nested Rules Using LESS
• Great Looking Cross-Browser Forms Using jQuery and Uniform
• Bulletproof @font-face Syntax
• CSS Trick to Auto-Clear Floats
• Transparant PNG Files in Internet Explorer