关闭iPhone/Safari输入元素舍入

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

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

当前回答

Input -webkit-appearance:无;光靠自己是不行的。

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

其他回答

Input -webkit-appearance:无;光靠自己是不行的。

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

如果你使用normalize.css，样式表会做一些类似于input[type="search"] {-webkit-appearance: textfield;}。

这比单个类选择器(如.foo)具有更高的特异性，因此请注意，您不能只使用.my-field {-webkit-appearance: none;}。如果你没有更好的方法来实现正确的特异性，这将有助于:

.my-field {-webkit-appearance: none !｝

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

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

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

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

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

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

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

推荐文章