关闭iPhone / Safari输入元素舍入

我的网站在iPhone / Safari浏览器上的呈现效果很好，但有一个例外：我的文本输入字段具有一种怪异的圆形样式，与我的网站的其余部分完全不一样。

有没有一种方法可以指示Safari（通过CSS或元数据）不对输入字段进行舍入并按预期将其呈现为矩形？

在iOS 5和更高版本上，出色border-radius的技巧可以达到以下目的：

input {
    border-radius: 0;
}

如果您仅必须在iOS上删除圆角，否则由于某些原因无法在跨平台标准化圆角，请改用prefixed -webkit-border-radius属性，该属性仍受支持。当然，请注意，Apple可以随时选择放弃对prefix属性的支持，但考虑到其其他特定于平台的CSS功能，他们会保留它的机会。

在旧版中，您必须设置-webkit-appearance: none：

input {
    -webkit-appearance: none;
}

input -webkit-appearance: none; 独自行不通。

尝试-webkit-border-radius:0px;另外添加。

这是删除IOS中四舍五入的最佳方法。

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

注意：请不要将此代码用于“选择选项”。我们选择的它将有问题。

接受的答案使单选按钮在Chrome上消失。这有效：

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

这是Compass（SCSS）的完整解决方案：

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

对于在iPhone 3GS上的iOS 5.1.1上的我来说，我必须清除搜索字段的样式并将其设置为预期的样式

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

否则-webkit-border-radius: 0;单单没有明确的原生样式。这也是本机应用程序上的Webview。

我有同样的问题，但仅适用于提交按钮。需要去除内部阴影和圆角-

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

如果您使用normalize.css，则该样式表将执行类似的操作input[type="search"] { -webkit-appearance: textfield; }。

它比单个类选择器具有更高的特异性.foo，因此请注意，这样做不能做到.my-field { -webkit-appearance: none; }。如果您没有更好的方法来实现正确的特异性，这将有帮助：

.my-field { -webkit-appearance: none !important; }

请试试这个：

尝试input像这样添加CSS：

 -webkit-appearance: none;
       border-radius: 0;

我使用了一个简单的border-radius：0; 删除文本输入类型的圆角。

为了在Safari和其他浏览器上正确呈现按钮，除了将webkit-appearance设置为none之外，您还需要为按钮提供特定的样式，例如：

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf