Grow your CSS skills. Land your dream job.

button padding issue

  • # October 8, 2012 at 7:11 am

    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;
    }
    }
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".