Introduction
Alot of people will use the outline CSS property to get rid of the focus outline around links using something like this:
1 2 3 | * { outline: none; } |
However one thing you may have noticed if you’ve ever tried this is that it has no effect on the focus border of buttons:
It is possible to remove (or style) this border, although be aware that it only works in Gecko based browsers (As far as I know – it’s certainly possible webkit has something similar now. Don’t hold your breath for IE though!).
The Method
The way to achieve this is to use the propriety mozilla pseudo-class ::-moz-focus-inner. This targets the focus outline and allows it to be styled. Note that it is the border property not the outline property which handles the style of the outline itself.
1 2 3 4 5 6 7 | button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; } |
The ugly black border is banished:
To style the border rather than remove it completely, a more accessible solution, you can use more standard pseudo-classes such as :focus and apply some normal CSS rules:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: 1px dotted transparent; } button:focus::-moz-focus-inner, input[type="reset"]:focus::-moz-focus-inner, input[type="button"]:focus::-moz-focus-inner, input[type="submit"]:focus::-moz-focus-inner, input[type="file"] > input[type="button"]:focus::-moz-focus-inner { padding: 3px; border-color: #F3F3F3; } |
A Note on Accessibility
I’m going to end this post with a word about accessibility. The technique described here is not very friendly to people using a keyboard to navigate the site either by choice or due to a disability. Personally I believe that accessibility and design need to work together as much as possible, and this is not something I would use on a public site. However I believe that in some situations, it is perfectly acceptable to sacrifice accessibility over design.
At my place of work for example, I develop and maintain a CMS which I am in the process of redeveloping/redesigning. I also have control over the user’s computers and the software on them, including the browser. Because I know the audience of the site, and know what browser they will be using as well as the fact that they will not be adversly affected by this, I made the design decision to use this technique. If you don’t know your audience this well I’d urge you to consider taking the hit on the design for the sake of users who might be affected by the lack of button focus indication.