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)
button::-moz-focus-inner {
border: 0;
}