4

The new iPad puts a default border radius on all my input fields. How can I get rid of this default radius?

I verified that there is no border-radius property in the CSS and that there is no radius when the MacBook Pro renders my site, but the new iPad does indeed have a radius on the text input fields.

Kev
  • 118,037
  • 53
  • 300
  • 385

1 Answers1

7

Are you sure it's exclusive to the new iPad? Or might it be something pertaining to all iOS devices? I ask because the Safari browser in iOS devices does apply a specific styling to input elements.
You can, however, turn it off with this:

input {
  -webkit-appearance: none;
}

Do that and border-radius: 0 starts working just as you'd expect it to.

This has been answered here a few times before: Turn off iPhone/Safari input element rounding.

Community
  • 1
  • 1
João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • In my case, iPad New, border-radius works on it's own. –  Aug 12 '12 at 20:31
  • However, there is some annoying drop shadow, that the appearance attribute removes as well. –  Aug 12 '12 at 20:31
  • Yes it does that too. Instead of using none then, try using `textfield` . It's a valid value for that propery, however, I can't ensure it works as I myself am not seeing the rounded corners issue on my iPad without it. – João Paulo Macedo Aug 12 '12 at 22:46