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.