Hacker News Reader

On Firefox, a dotted line appears around the button's text when it has focus (after click for instance). IMO, it ruins the nice clear style of the buttons.

You can remove it with the non-standard `button::-moz-focus-inner{border:0}`. Then you could define some style for `button:focus{...}` to help keyboard navigation.

View on HN

Or just button:focus{ outline:none; }. That should remove focus styling on all browsers, last I checked.

Not on Firefox. It doesn't use the pseudo-class :focus{outline} for buttons' dotted line, but the pseudo-element ::-moz-focus-inner on which a border is applied.

Note that the dotted line appears inside the button, around the text, and not around the button like :focus{outline} would do.

Reply on news.ycombinator.com