iOS强制使用圆angular并眩光input
iOS设备在表单input上添加了很多烦人的样式，特别是在input[type = submit]上。 下面显示的是桌面浏览器和iPad上的简单search表单。
桌面：
iPad的：
input[type = text]使用CSS框阴影插入，我甚至指定了-webkit-border-radius：none; 这显然被覆盖。 我的input[type = submit]button的颜色和形状在iPad上完全被混淆了。 有谁知道我能做些什么来解决这个问题？ 提前致谢。
我工作的版本是：
input { -webkit-appearance: none; }
在某些webkit浏览器版本中，您可能还会遇到border-radius 。 重置以下内容：
input { -webkit-border-radius:0; border-radius:0; }
这可以扩展到适用于所有的webkit风格的form组件，如input ， select ， button或textarea 。
参考原始问题，当清除任何基于单位的CSS元素时，您不会使用值“无”。 另外请注意，这隐藏在Chrome中的checkbox，所以也许使用input[type=text]或input:not([type=checkbox]), input:not([type=radio]) 。
你可以摆脱一些更多的webkit的forms，input等与此样式：
input, textarea, select { -webkit-appearance: none; }
对于提交button不要使用：
<input type="submit" class="yourstylehere" value="submit" />
而是使用button标签：
<button type="submit" class="yourstylehere">Submit</button>
这对我有效。
看看normalize.css
有一个演示，你可以testing表单元素，看看他们在iOS中看起来像。 有多个面向webkit的属性。
这是我在我的项目中使用的
* { -webkit-tap-highlight-color: transparent; } a, article, div, h1, h2, h3, h4, h5, h6, img, section, span { -moz-user-select: none; -webkit-user-select: none; } input, select, textarea { -webkit-appearance: none; -webkit-border-radius:0; border-radius: 0; }
