CODEWITHSUNDEEP
htmlcssbutton
o_O
o_O

Reputation: 5737

CSS: Why is styling button elements different than other CSS?

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.

Upvotes: 0

Views: 179

Answers (1)

Marat Tanalin
Marat Tanalin

Reputation: 14123

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.

Upvotes: 1

Related Questions