关闭iPhone / Safari输入元素四舍五入

Question

我的网站在iPhone / Safari浏览器上呈现得很好，但有一个例外：我的文本输入字段有一个奇怪的圆形样式，但在我网站的其他部分看起来并不好看。

有没有办法指示Safari（通过CSS或元数据）不对输入字段进行舍入并将其呈现为矩形？

Answer 1

在iOS 5及更高版本中，好的'border-radius可以解决问题：

input {
    border-radius: 0;
}

如果您必须仅移除iOS上的圆角或因某些原因无法规范跨平台的圆角，请使用带前缀的-webkit-border-radius属性，这仍然受支持。当然请注意，Apple可以随时选择放弃对前缀属性的支持，但考虑到其他特定于平台的CSS功能，它们可能会保留它。

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

input {
    -webkit-appearance: none;
}

Answer 2

input -webkit-appearance: none;单独无效。

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

单独执行-webkit-border-radius: 0;并未清除原生样式。这也适用于原生应用的webview。

Answer 7

我遇到了同样的问题但仅限于提交按钮。需要移除内部阴影和圆角 -

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

Answer 8

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

之类的操作

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

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

Answer 9

请尝试这个：

尝试像这样添加input Css：

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

Answer 10

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

Answer 11

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

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