Kevin Powell - Community•3mo ago

What are good css normalize/resets for a button?

I wanted to add some button normalization styles, but I was wondering what is considered good practice or not. I found around 3 options, the first being very simple and direct is all: unset, but I vaguely remember Kevin saying it's not really good to use that because It can remove some good/relevant styles and I'm not sure it's the case here. The other ons ie the one below:

button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
        margin: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
        margin: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

something in-between simple and thorough. But I found another one more extensive:

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    font-weight: inherit; /* 1 */
    line-height: inherit; /* 1 */
    color: inherit; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    font-weight: inherit; /* 1 */
    line-height: inherit; /* 1 */
    color: inherit; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
}

Which one you guys thing is the best one to use? Or if there's a 4ª option, I'm all ears.

4 Replies

Kevin Powell•3mo ago

For the font things, I tend to just go with the font shorthand to do it all at once 😄 - font: inherit I also would never use line-height: inherit for those. Other than textarea, they're all one-line, and I usually do something like line-height: 1.1 or even 1 for them to help make spacing easier to deal with. I also wouldn't remove the margin and padding from them... I don't see the point in removing the padding? You'll probably be declarind something on them at one point anyway, why bother putting it to 0? As far as I know, all of those in that first list also don't have any margin in any browser? Safari used to (maybe FF too?) years ago, but looking at Safari, I think it was in 2013 that they removed it, I don't think we need to worry about that anymore

ἔρως•3mo ago

for the font, i would just inherit the font-size and font-family an input with bold text will look really weird the line height i would keep at 1.2 or 1.3, as 1.1 or 1 may cause cedils and accents to touch the letters above and bellow maybe even emojis could have problems with that

Rägnar O'ock•3mo ago

Normalizing the button-border style might be interesting, but you should maybe just style the buttons themselves instead

Amodeus R.OP•3mo ago

Thanks everyone for the answers!

Gaming

Programming

What are good css normalize/resets for a button?

Did you find this page helpful?