CSS Tip: Remove the Mac OS X Glowing Blue Outline for Custom Styled Input Fields

One of the great things about the Web is that it’s cross platform. You can use your favorite system to browse the Web, be it Windows, Mac OS X or Linux. Some of these systems, namely Mac OS X, sometimes try a little too hard to control the user experience, and so you’ll find that things like buttons, drop down boxes and input fields look fairly different to those on other systems — even more so with the blue glow effect you get around input fields. This glow effect can cause problems if your input field is using custom images and CSS formatting.

Here’s an example of a custom input field (from Mufin beta signup page):

\""

It’s just an email signup field. The designer decided to use a custom image as the frame for the field. Looks fairly nice. Let’s try clicking on it in Safari. Here’s what we get:

\""

Ouch. A big blue glow effect right around the “real” input area. This clashes badly with the image the designer wants to use for the field. Thankfully there is an easy CSS fix for this. All you need to do is set the outline property to none for when this field is in focus. The code looks like this:

input:focus { outline: none; }

Once you do that, the blue glow in OS X will be gone:

\""

And there you go — one line of code gets rid of the problem. Next time you make a custom styled input field don’t forget us OS X folks by implementing this simple fix.

author picture Written by Dmitry Fadeyev
Published on October 15, 2008