Normalize.css: Why is -webkit-appearance: button used?

Created on 30 Mar 2016 · 7Comments · Source: necolas/normalize.css

I searched the issues but could not find the justification for this.

I thought the idea for normalize is to give a common starting point for css but this does exactly the opposite by giving weird style on iOS.

Took a while to find this one ;)

thanks

Source

SteveALee

👍2

Most helpful comment

I'm using normalize.css and Bootstrap 3.3.X. If I create a label with class="btn btn-default btn-block", I expect it to look like this:

Instead, because of -webkit-appearance: button, which I agree should not be part of normalize.css, it looks like this:

This is in Chrome 56.0.2924.87 (64-bit) on macOS Sierra.

EDIT: I just realized that normalize.css is selecting the label because I mistakenly left type="button" on the label, when I changed some of my code. Removing it fixed this issue for me.

SystemDisc on 12 Feb 2017

👍6

All 7 comments

@SteveALee, hi! As stated in the comment, this allows us to style _buttons_ on iOS —styles that otherwise will be ignored.

In the screenshot below, the second button —an <input type="button" />— doesn't have the -webkit-appearance: button; declaration.

Does it make more sense now?

battaglr on 6 Apr 2016

👎3

Are you saying that without that style no other styles can be applied?

Strange as I'm sure I removed it and could still set my styles. But maybe was as I removed after your CSS rule. Or perhaps I was mistaken as styling is very light. I can't check right now.

SteveALee on 7 Apr 2016

If it is required how do we remove those rounded ends and other iOS native style things?

SteveALee on 7 Apr 2016

imo it would make more sense to use it when it's needed, not in a normalizer

f.e. it breaks Material UI's MenuItem

oreqizer on 23 May 2016

👍5

@oreqizer, why would you say that? And FWIW, that's a _bug_ on Metarial UI, please, see: #554 and https://github.com/callemall/material-ui/issues/4008.

battaglr on 31 May 2016

i really have no arguments for my statement, it's just it felt at that time, because it was making me really confused trying to figure out what was going on

i understand it's use now, however. i'll go ahead and check out the material-ui issue

oreqizer on 31 May 2016

I'm using normalize.css and Bootstrap 3.3.X. If I create a label with class="btn btn-default btn-block", I expect it to look like this:

Instead, because of -webkit-appearance: button, which I agree should not be part of normalize.css, it looks like this:

This is in Chrome 56.0.2924.87 (64-bit) on macOS Sierra.

EDIT: I just realized that normalize.css is selecting the label because I mistakenly left type="button" on the label, when I changed some of my code. Removing it fixed this issue for me.

SystemDisc on 12 Feb 2017

👍6

Was this page helpful?

0 / 5 - 0 ratings