Disable Highlighting on Webkit Form Controls

A note from A Beautiful Site’s founder: We developed Surreal to be easy for you and your clients. If you’re a web designer, you should take a look at the simple, hosted CMS that’s changing the way content is managed. Surreal integrates in moments and is trusted by over 18,000 websites. Try it out for free and let us know what you think! Visit Website »

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>