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

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

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

---

#1楼

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

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

做-webkit-border-radius: 0; 单独没有清除本机造型。 这也是本机应用程序的webview。

---

#2楼

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

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

---

#3楼

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

---

#4楼

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

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

---

#5楼

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

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

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3170909