Disable Highlighting on Webkit Form Controls

Webkit users — that is, anyone using Apple Safari or Google Chrome: Have you ever wondered how to get rid of that fuzzy blue/yellow halo that appears when you focus on text fields, textareas, and other form controls on your website?  Here's a small snippet of CSS code that you might find useful:

*:focus { outline: none; }

This will effectively remove all traces of the outline, allowing you the freedom to style your form controls however you like.

Webkit focus outline (before and after)

This is a before-and-after screenshot of what a regular text field looks like in Safari, although the same technique applies for Chrome.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.