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: 0 !important;         border: 0 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.

9 Responses to “Fix Firefox Button Padding”

  1. Debbie says:

    Thank you so much, this is the best explanation I’ve seen for this issue. Very clear and works perfectly.

  2. Hallo Manson,

    that solves my problem :-) Will add this snippet to my CSS reset.
    Greetings from Germany
    Martin

  3. Claudio says:

    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)

  4. Mason says:

    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;
    }

  5. Really thanks for this information page , I digg it now away .

Leave a Reply

You must be logged in to post a comment.

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