June 22nd, 2010 
Dan Phillimore As we all know by now, consistently styling form elements with CSS is virtually impossible. However, with a few tweaks and after reading Firefox’s user-agent CSS file forms.css, I discovered the following:
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;
padding: 0 2px;
}
… Firefox uses pseudo-elements within the button elements themselves for drawing. As you can see above, this means that padding of 2px is added to the top and bottom of this inner pseudo-element, therefore it may be removed as follows:
button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
… thereby removing the padding (and in this case, the inner border too, as it was extra spacing not required; however I suspect it is used for the dotted selection border visible when a button has the focus.)
For completeness, I generally enclose such Firefox-specific code as below, more as a descriptive markup than anything else, however it serves to stop the rules being interpreted by any other browser, also being useful for targeting Firefox-only CSS:
/* Used within FF chrome to target CSS to specific URLs: being FF-specific,
it is also useful for targeting FF-only code */
@-moz-document url-prefix(http://) {
button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
}
About the author
- Dan has spent the past 10 years developing specialist software, using everything from x86 assembly to C++ and VB. For the past few years he has focused on JavaScript development of high-performance virtual machines for the modern web and developing bespoke modern websites using the LAMP stack.
- When he is not working on the next web-based OS, he spends his time out with friends, his girlfriend Jen or planning to buy an American muscle car.
Posted in 
Tags: 
Thank you so much, this is the best explanation I’ve seen for this issue. Very clear and works perfectly.
Hallo Manson,
that solves my problem
Will add this snippet to my CSS reset.
Greetings from Germany
Martin
Thank you Dan for this invaluable info.
No other site explains this problem so clearly as yours.
It helped me a lot!!!
Would you tell me where i may learn more about this command?:
” @-moz-document url-prefix(http://) ”
I’ve seen that you explained that it was for rules that should apply only to Firefox (mozilla engine), but for instructions just to “webkit” and other, is there any way to set them?
Thanks a lot!!!
Claudio
(from Argentina)
Hi Claudio,
No problem, thanks for the comment!
The documentation for “@-moz-document” may be found in the MDN (https://developer.mozilla.org/en/CSS/@-moz-document)
To target Webkit, use the following: “@media screen and (-webkit-min-device-pixel-ratio:0) { … }”
(Taken from http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/)
Cheers
Thank you!!!
You are Awesome!!!
Keep up that great work!
Claudio
Thanks.
This worked wonderfully for me. I modified slightly:
input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { /* Fixes Firefox input button padding issue */
padding:0px !important;
border: 0 none !important;
}
Hi Mason,
Glad to help, thanks for the comment!
Cheers
Really thanks for this information page , I digg it now away .