Fix Firefox Button Padding

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: 0px !important;
        border: 0px none !important;
    }
}
Cheers, Dan Phillimore

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.
You can leave a response, or trackback from your own site.

Leave a Reply

Powered by WordPress | Design by OVMS, based on AnimeStar (Best MMORPGs | Thanks to MMORPG List, VPS Hosting and Website Hosting)