关闭iPhone/Safari输入元素舍入

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

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

当前回答

请试试这个:

尝试像这样添加输入Css:

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

其他回答

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

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

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

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

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

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

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

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

推荐文章