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.
Thank you for your solution!
Gr8t suggestion, i had , so the dotted border will apply on the whole button instead of only text area
Gr8t suggestion, i had /input value=” Add” class=”btnbg” type=”button”/, so the dotted border will apply on the whole button instead of only text area
Why not simply use onFocus=”blur()” on the submit button ?
Hi fryck
There are a couple of reasons I can think of.
Firstly, blur() will take the focus away from the button. This means users who do not use a mouse will never be able to activate your button. The CSS technique does not take the focus away from the button, it just allows you to style the focus indicator.
Secondly that technique uses javascript, while this is pure CSS.
Hi, thanks for the solution, but unfortunately this does not work in IE ?
Thanks a lot. I was looking for this a long time.
So it works for Gecko browsers, but what would be the solution for IE? Is the outline:none property enough then?
Thank you so much for the solution!
But, is there no solution in IE???
Hey, great tip!! i have been searching the way to get rid of these border in buttons for a while.
By the way, i tend to specify slightly different styles for :focus, :hover, and :active states of buttons, generally changing the border or background color to a different tone, applying box-shadows and text-shadow, which looks way better than that outline thing, and gives a better overall impression without sacrificing accesibility.
I think that as long as you give your keyboard users a clear clue of the focus on the button, you’ll be safe on accesibility, with outline or not.
If you think it’s too much to style every state, i’d recommend at least using two different states, “normal” and “anything else” and apply it to :hover :active :focus, before you remove the outline.
Thanks a lot bro.
i tried many tricks but dos’t work.
Thanks a lot…
Since I started to learn HTML 2 years ago I could never draw ‘outline’ that firefox, man you are very good! this code is very useful for anyone who suffers with these damn hatch. Thank
Thanks for the solution……..!
Excellent! have been struggling for past 2 days. Thanks a lot.
Brilliant…this should be higher in the search results. Not easy information to find. Anyway, thanks for curing my headaches.
it works , great, thank you so much for the help.
I wanted to customize my submit button,
this article helped me alot.
Thanks.