Basic styling of `button` elements
Well, button elements have historically been tricky to style,
and though the situation is quite better now there are still a few quirks
that need fixing. Here’s some boilerplate code that resets the browsers’
default styles for this element.
button {
margin: 0;
padding: 0;
border: none;
font: inherit;
color: inherit;
background: none;
/* IE7 fix */
overflow: visible;
}
/* Firefox fix - bug 140562
We're using :-moz-focusring rather than :focus so that we don't
change the default focus in other browsers.
*/
button::-moz-focus-inner {
padding: 0;
border: none;
}
button:-moz-focusring {
outline: 1px dotted;
}Here’s a and
Tell me more about them fixes
Incompressible padding in Firefox
In Firefox, button elements seem to have some incompressible
padding (similar to padding: 1px 3px). It’s actually the
result of a Firefox-specific pseudo-element inside the button,
used to display a focus outline inside the button
(around its content).
You can remove it by targetting the button::-moz-focus-inner
pseudo-element, but it will remove Firefox’s focus styles so we have to
declare our own.
Ignored horizontal padding in IE7
IE7 seems to ignore any horizontal padding on the button
element… unless you declare overflow:visible for that element.
(Don’t ask me why. Thankfully, this bug was fixed in IE8.)
Anyway, visible is the default value for overflow
so it should be safe to declare it for all browsers if you need IE7
compatibility.
Credits
Thanks to @mrkirkland for the IE7 fix, @bpierre and @pumpkin for the Firefox fix.