关闭iPhone/Safari输入元素舍入

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

是否有一种方法来指导Safari(通过CSS或元数据)不四舍五入的输入字段，并将它们呈现为预期的矩形?

349469 次浏览
小开
最佳答案

在iOS 5及更高版本上:

input {
border-radius: 0;
}


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

如果你必须只在iOS上删除圆角，或者由于某些原因无法在跨平台上标准化圆角，则使用input { -webkit-border-radius: 0; }属性来代替，该属性仍然被支持。当然要注意的是，苹果可以选择在任何时候放弃对前缀属性的支持，但考虑到他们的其他平台特定的CSS功能，他们很可能会保留它。

在遗留版本中，你必须设置-webkit-appearance: none:

input {
-webkit-appearance: none;
}
小开

input -webkit-appearance: none;单独不工作。

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

小开

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

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

单独执行-webkit-border-radius: 0;并不能清除本机样式。这也是一个本地应用程序的web视图。

小开

我遇到了同样的问题，但只是提交按钮。需要删除内部阴影和圆角

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

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

小开

以下是Compass (SCSS)的完整解决方案:

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

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

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
-webkit-appearance: none;
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;
小开

接受的答案使单选按钮在Chrome上消失。如此:

input:not([type="radio"]):not([type="checkbox"]) {
-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

提交答案