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.

Before-and-After of Webkit Focus Border

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

If you enjoyed this article, please share it with a friend!

Comments are closed.