The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

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 intended 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:

It is important to note that this should only be done in situations where you are replacing the default focus state with your own custom styling since you still need to indicate to the user which field they’ve selected (something that is especially important for keyboard navigation). This can be done by changing the border color, background color, and so on. If you are not changing the form styling, it’s best to leave the default focus state as it is.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: