Turn off iPhone Safari input element rounding

Question

My website renders well on the iPhone Safari browser  with one exception  My text input fields have a weird rounded style which doesn t look good at all with the rest of my website   Is there a way to instruct Safari  via CSS or metadata  not to round the input fields and render them rectangular as intended

User · Answer

Here is the complete solution for Compass  SCSS    input     -webkit-appearance  none      remove shadow in iOS    include border-radius 0       remove border-radius in iOS

User · Answer

input -webkit-appearance  none  alone does not work   Try adding -webkit-border-radius 0px  in addition

User · Answer

On iOS 5 and later   input     border-radius  0     input type  search       -webkit-appearance  none      If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms  use  input   -webkit-border-radius  0    property instead  which is still supported  Of course do note that Apple can choose to drop support for the prefixed property at any time  but considering their other platform-specific CSS features chances are they ll keep it around   On legacy versions you had to set -webkit-appearance  none instead   input       -webkit-appearance  none

User · Answer

In order to render the buttons properly on Safari and other browsers  you ll need to give a specific style for the buttons in addition to setting webkit-appearance to none  e g    border-radius  0  -webkit-appearance  none  background-image  linear-gradient to bottom   e4e4e4   f7f7f7   border  1px solid  afafaf

User · Answer

Please Try This one   Try Adding input Css like this    -webkit-appearance  none         border-radius  0

User · Answer

If you use normalize css  that stylesheet will do something like input type  search     -webkit-appearance  textfield      This has a higher specificity than a single class selector like  foo  so be aware that you then can t do just  my-field   -webkit-appearance  none     If you have no better way to achieve the right specificity  this will help    my-field   -webkit-appearance  none  important

User · Answer

I had the same problem but only for the submit button  Needed to remove the inner shadow and rounded corners -  input type  submit     -webkit-appearance none  -webkit-border-radius 0

User · Answer

I used a simple border-radius  0  to remove the rounded corners for the text input types

User · Answer

It is the best way to remove the rounded in IOS   textarea  input type  text    input type  button    input type  submit          -webkit-appearance  none       border-radius  0      Note  Please don t use this code for the Select Option  It will have problem on our select

User · Answer

The accepted answer made radio button disappear on Chrome  This works    input not  type  radio    not  type  checkbox          -webkit-appearance  none      border-radius  0

User · Answer

For me on iOS 5 1 1 on a iPhone 3GS I had to clear the styling of a search field and the set it to the style intended  input type  search    -webkit-appearance  none  border-radius  0 3px 3px 0     Doing -webkit-border-radius  0  alone did not clear the native styling  This was also for a webview on a native app

[html] Turn off iPhone/Safari input element rounding

Examples related to html

Examples related to css

Examples related to iphone

Examples related to mobile-safari

Examples related to css-reset