0

http://jsfiddle.net/q6dgv/

<button type="submit" style="padding: 10px;">Button</button>

Has no padding, but:

<button type="submit" style="padding: 10px; background: #ff0000;">Button</button>

does have padding.

Could this be a FF bug? I've tested in other browsers and it works as expected. I've also tried other css and they have no effect, just background.

Ok. So since no one is answering...what is the reset for buttons? How to get rid of the default borders, the box-shadow, etc. Applying a background in conjunction with no border, outline, etc does nothing to reset the buttons.

3
  • Also, the background removes all the other default styling as well...weird.
    – o_O
    Commented Nov 24, 2012 at 6:46
  • Looks the same to me. version 17 - removing default styles is the same across all browsers.
    – sachleen
    Commented Nov 24, 2012 at 6:46
  • That makes no sense. What you're saying is that removing default styles depends on removing a single style before it will accept anything else.
    – o_O
    Commented Dec 2, 2012 at 2:33

1 Answer 1

1

How OS/browser default styling is performed is different from how CSS works and what CSS itself supports. Once you've changed background of button, it's probably hard or even impossible to keep other aspects of default styling to be applied.

To remove default border and padding, following code is usually used:

BUTTON,
BUTTON::-moz-focus-inner {
    border: 0;
    padding: 0;
}

::-moz-focus-inner pseudoelement is needed to get rid of implicit extra padding in Firefox.

1
  • This is exactly what I wanted to know. Button reset is different than regular reset. I look all through Google for reset button info and there isn't anything I can find. And you are correct in that adding a background alters the other styles. In the example, adding a background removes border-radius and applies the old 1995 border.
    – o_O
    Commented Dec 14, 2012 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.