Focus Feedback

This post originally appeared on the Yahoo! Accessibility blog.accessibility-205x85

The browser provides visual feedback when a control receives focus. The default visualization usually matches how focus is rendered on the host platform: On Windows this is a subtle dotted outline, on MacOS a blue glow.

Windows: Mac:

The focus outline is important in that it both directs the users attention, and serves as a cursor for users who navigate using the keyboard (most commonly by pressing Tab or Shift + Tab). Often the focus outline is removed using CSS, making navigation impossible for keyboard users.

The Problem

The focus outline is removed when either the outline-style and/or the outline-width properties are set to "0" or "none", or the outline-color is set to "none" or "transparent." Here's some examples of common uses of the outline found while grepping Yahoo! CSS files.

outline: none;
outline: 0;
outline-style: none;
outline: medium none;
outline: 1px;
outline: 0px none transparent;

The Cause
That's how outline is being removed, but why? Some common reasons:

1. Reset stylesheets

Often outline is set to "none" or "0" by reset stylesheets.

2. To fix broken or awkward focus outlines

Sometimes the focus outline is hidden to prevent the user from seeing it rendered broken, often the result of overflow:hidden on one of the container elements. In the following example from Yahoo! News, the clipped focus outline on the Mac makes it difficult to determine which menu item in the drop down actually has focus.

Yahoo! News Menu

The focus outline is also often hidden to prevent the user from seeing an oddly shaped outline resulting from CSS image replacement techniques. For more, see Patrick H. Lauke's article Don't Lose Your :focus.


1. Don't Remove It

The easiest way to avoid the problem is to not remove the focus outline.

2. Replace It

When replacing the outline for a given module or widget, don't use a global selector as this will remove focus for the entire page or application. The more mindful you are of the specificity of the selector(s) used to remove the browser's default focus style, the less likely you are to unintentionally remove the browser's default focus outline from other elements. Here's some examples of common, problematic selectors:

/* BAD:
Removes the outline from all link elements. */
a {
outline: none;
/* BAD:
Removes the outline when any element receives focus. */
:focus {
outline: none;
/* BAD:

Still too broadly scoped. Perhaps the intention was to
remove the focus outline from the tabs in a tab control,
but would also affect any anchors inside the tab's
content. */
.tabview a {
outline: none;

When replacing the browser's default focus styles, the goal should be to create rules specific enough to target just the control/element AND state you are looking to address. This will result in code that is less error prone, and more self-documenting.

/* GOOD:
Targets just focused tabs inside instances of a
tabview control. */
.tabview .tab:focus {
outline: none;
background-color: blue;

When replacing the focus outline, consider using one (or more) of the following properties. These work well as they don't affect the box model and cause the surrounding content to reflow when the element receives focus:

  • text-decoration
  • color
  • background-color
  • box-shadow

Limitations in IE
Custom focus styling is limited in IE depending on the browser version. Prior to 8, IE did provide custom focus styling, but only for links via the :active pseudo class. Further, removing the focus outlined required use of the hidefocus attribute or setting the element's tabIndex to -1. For all these reasons, consider custom focus styles a Progressive Enhancement.

Should you need custom focus styling on controls other than links for older versions of IE, you could leverage JavaScript to create a delegated focus and blur event listener that add/removes a class in response to focus and blur. Here's two examples using YUI and jQuery.

Using YUI

var toolbar ="#toolbar");
if ( && < 8) {
toolbar.delegate("focus", function () {

}, "button");
toolbar.delegate("blur", function () {

}, "button");

Using jQuery

var toolbar = $("#toolbar");
if (browser.msie && browser.version < 8) {
toolbar.on("focus", "button", function () {

toolbar.on("blur", "button", function () {


Related Reading and Resources