关闭 iPhone/Safari 输入元素舍入

在 iOS 5 及更高版本上：

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

如果您只能在 iOS 上移除圆角，或者由于某种原因无法跨平台标准化圆角，请改用 input { -webkit-border-radius: 0; } 属性，该属性仍受支持。当然请注意，Apple 可以随时选择放弃对前缀属性的支持，但考虑到他们其他特定于平台的 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;
}

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

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

单独执行 -webkit-border-radius: 0; 并不能清除原生样式。这也适用于本机应用程序上的 webview。

这是 Compass (SCSS) 的完整解决方案：

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

我有同样的问题，但只针对提交按钮。需要去除内阴影和圆角 -

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; }

我使用了一个简单的边界半径：0；删除文本输入类型的圆角。

请试试这个：

尝试像这样添加 input Css：

 -webkit-appearance: none;
       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