Styling the :focus CSS property

All browsers help improve a pages accessibility by adding a default style to an achor element that's 'in focus' by adding a dotted border (or other default style). You can see this default style on the following link by clicking your tab key:

» Focusing on this link will display your browsers default focus style

For whatever reason, many designers and developers will choose to remove this default styling by using something like the following in their stylesheets:

* { outline: none;}

By now you've probably realised this isn't a good idea, as it disables the really helpful built-in method of browsers increasing a pages accessibility. But 'OK great?' I hear you asking, but 'What's the point of all this?'... well the point of all this is that simply removing it isn't the only solution to keeping the focus style contiguous with your overall design, it can be styled like any other CSS property.

Tab through the following links to see several different ways you might style the :focus property:

» A background colour change

» A text colour change

» A change to the border colour and size

The key thing to remember is to keep it high contrast and high visibility, use bold colours or other obvious styling methods.

/* Change background colour on :focus */
a:focus {background: #34adad; color: #fff!important; outline: 0;}

/* Change the text colour on :focus */
a:focus {color: #f00!important; outline: 0;}

/* Change the outline style on :focus */
a:focus { outline: #177f7f dotted medium; }