I can make Firefox not display the ugly dotted focus outlines on links with this:
a:focus {
outline: none;
}
But how can I do this for <button> tags as well? When I do this:
button:focus {
outline: none;
}
the buttons still have the dotted focus outline when I click on them.
(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)
The below worked for me in case of LINKS, thought of sharing - in case someone is interested.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Cheers!
I think you should really know what you're doing by removing the focus outline, because it can mess it up for keyboard navigation and accessibility.
If you need to take it out because of a design issue, add a :focus state to the button that replaces this with some other visual cue, like, changing the border to a brighter color or something like that.
Sometimes I feel the need to take that annoying outline out, but I always prepare an alternate focus visual cue.
And never use the blur() js function. Use the ::-moz-focus-inner pseudo class.