Remove rounded corners on input elements in Mobile WebKit #178

Closed
iamkeir opened this Issue Apr 3, 2013 · 7 comments

Projects

None yet

4 participants

@iamkeir

Spotted that Mobile WebKit gives input elements a border-radius - would the removal of this be within normalize's remit?

http://jsfiddle.net/iamkeir/FnN5u/

IMG_4630
iOS Simulator Screen shot 3 Apr 2013 22 03 47

@fronteed

There's also a box-shadow.

This code should help:

-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
@necolas
Owner

would the removal of this be within normalize's remit

Possibly. In general, I try to keep normalize focused on things that can be a problem - like the inability to style elements, spacing and display inconsistencies, etc. Some aesthetic differences are OK as it's not really feasible or desirable to get pixel perfection across all browsers and platforms.

But there might be some good reasons to do this, if it can be done without side effects. Thanks for reporting this.

@iamkeir

No problem, thanks for the response.

@necolas
Owner

Using iOS simulator, I couldn't actually get rid of the box-shadow.

@medoingthings

Using iOS simulator, I couldn't actually get rid of the box-shadow.

-webkit-appearance: none; should do the trick

@necolas
Owner

-webkit-appearance is too destructive, it remove all the other default form styles. I'll remove the border-radius, but leave the rest alone.

@necolas
Owner

Actually, there's no nice way to do this without affecting lots of different input types (radio/checkbox look the same without border radius, input buttons lose a lot of styles, etc). So, another wontfix / do this in your component css i'm afraid.

@necolas necolas closed this Jan 24, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment