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.
15 Oct, 2008
I can’t tell what I like more about this post: the information provided, or the simplicity. mayhaps both?
15 Oct, 2008
Didn’t feel like doing a long post, and this is something that’s been bugging me for a while :)
16 Oct, 2008
Excellent tip! I’ve always used outline:none to remove the pesky dotted lines on links a:focus{outline:none} but never thought to use this on an input.
Thanks for the tip!
16 Oct, 2008
Fantastic post. This goes into my arsenal from this point forward.
16 Oct, 2008
I would, however, recommend putting your own :focus style so that users can tab around the form and know where they are.
16 Oct, 2008
Wow. I didn’t know this tip.
It works also for textarea, select,…
Thanks.
16 Oct, 2008
Maybe we should just not custom-design form fields
16 Oct, 2008
@jyoseph - Breaking usability rule #1 there! That outline serves a purpose, you know ;)
Great tip, always a useful one to have.
16 Oct, 2008
@Harry:
I don’t care…
I remove it. Especially if it’s in a tabbed menu.
16 Oct, 2008
Nice attitude to have…
16 Oct, 2008
[...] Dmitry outlines a CSS Tip: Remove the Mac OS X Glowing Blue Outline for Custom Styled Input Fields [...]
16 Oct, 2008
Sure, it looks better, but… do you really want to remove a UI hint all Mac users expect and are used to? It makes *your* form fields inconsistent with all other form fields!
16 Oct, 2008
LKM — the question isn’t really wether you should turn off the fields, the question is whether you should be using custom styling and images for form elements. If you do go for custom styles, then you may as well go all the way :)
For most cases I’d say you should probably stay with standard formatting, not only because it’s what the visitors are used to, it’s also just a lot less work :) In exceptional cases (as in, exceptions; e.g. email signup, site-wide search) you may want to give your field a unique look. I think that’s OK — as long as the input field looks like an input field there won’t be much confusion.
16 Oct, 2008
Thanks for a great tip, I appreciate this may interfere with expected interaction but on the other hand, there are simply times it doesn’t make sense to have it there.
16 Oct, 2008
@Dmitry: I disagree. You can change fields to look consistent with your page while still make them immediately identifiable as fields. But removing the “active border” prevents users from immediately seeing which field has the focus.
I agree that there are cases where removing the focus border is desirable. I doubt it’s a common case, though.
16 Oct, 2008
In general, it’s best to apply outline: none in your CSS reset, and apply a :focus to elements that may be navigated with the keyboard.
16 Oct, 2008
LKM: The outline is not the only way to show focus. In my example, the designer actually uses a different image for the background when the field is in focus — which not only has a different colored border, but a different background also. Of course it’s better to have some kind of :focus effect — I’m not arguing against that at all — but once you go custom style territory, this is usually done with image rather than an outline property :)
16 Oct, 2008
@Dmitry: Yes, the outline is not the only way to show focus, but it’s the one your users expect.
16 Oct, 2008
I work at a firm that still only codes for IE6 but this’ll be a nice little addition to sneak into the CSS. Thanks!
16 Oct, 2008
LKM: You can make an ‘outline’ using an image, which is what I’m talking about here. If you leave the operating system image in place it will go over your image, creating problems as seen in the example above. So what we’re doing is actually modifying an outline style, rather than removing it.
16 Oct, 2008
Blake: IE6 only? Ouch :)
16 Oct, 2008
Gotta say, I agree with Dmitry. If you look at this issue from a user’s perspective, they *need* to see common interface elements presented to them in the way they see them on the rest of the applications on their computer. Why should there be an exception for web apps?
While I may be able to quickly discern between custom interface elements and standard, the vast majority of users can not do it as quickly as I. I want my users to find form fields quickly as possible, and fill them out. They shouldn’t have to wonder for even a faction of a second about what they are looking at.
16 Oct, 2008
All that trouble to change default behavior of a desktop application.
Nice to know, but I wouldn’t implmenet this one, unless your website/application is an intranet that is used by a large number of users ( 8000 employees).
But then again, a company with 8000 users would only use IE, right?
Or maybe, Apple Inc, but … then again, it would be against their user interface guidelines:
Search for “Text Input Field Specifications”: http://developer.apple.com/doc.....-TPXREF107
18 Oct, 2008
[...] CSS Tip: Remove the Mac OS X Glowing Blue Outline for Custom Styled Input Fields [...]
21 Oct, 2008
Does this work on Ubuntu too? Somebody should check that!
24 Oct, 2008
[...] handy tip from usabilitypost about fixing a Mac’s default blue glow around focused text [...]
30 Oct, 2008
outline: 0
I grasped you do not lose usability
3 Nov, 2008
Thank you so much for this! That’s been bugging me for awhile.
4 Nov, 2008
No problem Toby :)
5 Nov, 2008
[...] Remove the Mac OS X Glowing Blue Outline for Custom Styled Input Fields – Hinfort [...]
5 Nov, 2008
It´s the same in Firefox 3.
10 Nov, 2008
I Agree with the guys here.
Why to destroy Usability issues of users?
I like to see the focus on my inputs. What if i’m a Tab keyboard user, and not a mouse one? how could i know where am I?
and worse then that, the do a css.reset of outline:none is a terrible approach that puts design in front of usability.
Dmitry- have u ever tried using a form with disabled outlines, while using Tabs?
10 Nov, 2008
btw, you can also remove the resize handle on textareas by adding the CSS3 property resize:none to them
21 Nov, 2008
That outline not only serves a usability purpose, but also an accessibility purpose, and it should never-ever-ever be removed just to make something look nicer.
21 Nov, 2008
Let me clarify, my post has nothing to do with removing outlines — it’s just restyling them, which in many cases will give an even stronger indicator than the default browser one. Do you not think the custom “outlines” styled using images or the background colors or custom borders won’t provide that usability/accessibility benefit? Or am I missing something? :)
26 Nov, 2008
Support for :focus isn’t universal. For instance, in FF on Mac, select tag will ignore it.
@ NeoSwf etc - there are other ways of catering for accessibility without using a built in focus outline… background colours or php-generated attributes. Use your imagination. It doesn’t have to be ugly to be accessible.
7 Dec, 2008
[...] (unten). PS: Angeblich hilft das auch gegen diese blau glühenden Rahmen auf dem [...]
25 Dec, 2008
Never seen such a ugly glow under Windows. For 95% of my visitors this ‘usability’ from Cupertino is non-existent.
I’ve my own ways of telling which field has focus.