In Firefox, ::-moz-focus-outer
and ::-moz-focus-inner
pseudo-elements are primarily for button-type elements, including button
type, reset
type, and submit
type.
The button uses line height to center the text vertically, but the text in Firefox is lower and there is a dashed box in the middle of the click. Firefox's button system style is as follows:
{ Border: 1px dotted transparent; padding: 0 2px;} Button:-moz-focusring::-moz-focus-inner, input[type= "reset"]:-moz-focusring::-moz-focus-inner, input[type= " Button "]:-moz-focusring::-moz-focus-inner,
{ Border-color: buttontext;}
Solution:
Button::-moz-focus-inner, input[type= "reset"]::-moz-focus-inner, input[type= "button"]::-moz-focus-inner,
{ Border:/* go to the dotted box */; padding:0;}
In fact, the outline settings for the button need to be set up to achieve the same style effect as all browsers:
{ outline:none; /* For IE */} { border-color: transparent; /* For Mozilla */
Firefox's-moz-focus-inner