CSS3 重设iphone访问器按钮input,select等表模块素的默

今日在企业写了1个登陆网页页面实际效果，让我碰到1个奇异的难题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari访问器下圆角有1个bug”。下面我来简易的叙述1下这个bug的模样：

初加载网页页面后，表单中的input[type="submit"]和input[type="reset"]按钮3D渲染成下图的模样：

怪异的是你点一下之后就会一切正常：

也许许多同学会觉得我的款式编码没写好，那末想让大伙儿了解是如何1回事，先看来看我写的编码：

input[type="submit"]和input[type="reset"]款式编码：

这样的编码在访问器中访问是彻底沒有难题的：

注：请应用safari检测上面编码。
但是上面的编码就在iPhone的Safari访问器下出开始所阐述的难题。1下真不太好怎样动手能力处理，由于几乎沒有触碰过，因此就1直沒有碰到过。 但难题出了，就要想方法处理，因而在GG上检索“input submit for iPhone”，还真寻找了难题所属。 Keir Whitaker 在Styling Submit Buttons for Mobile Safari 中详细介绍的內容和我碰到的难题可简直1模1样，按其方式在款式中添加：

拷贝编码
编码以下:
.form-actions input{
 ...
 -webkit-appearance: none;
 }

升级到iPhone1看，真爽，难题处理了。

原先难题出在这里，iPhone上的safari分析input[type="submit"]和input[type="reset"]按钮会以 iPhone访问器的默认设置UI3D渲染，这样就出現我刚刚那种现像，大家在款式中确立的设定了button的圆角值，但到iPhone的safari上就不起效了。要 想让他起效，就必须在款式中确立的指名：

拷贝编码
编码以下:
.form-actions input{
 ... 
 -webkit-appearance: none;  }

在不一样的“-webkit-appearance”选值状况下，button所3D渲染的实际效果是不1样的，详尽的检测编码大伙儿可以使用safari访问器点一下这 里。相关于“-webkit-appearance”的详尽详细介绍，这回算是了解了，最终我提议大伙儿，大家能够立即在“reset.css”款式文档中加处 这么1句：

拷贝编码
编码以下:
input[type="submit"],
 input[type="reset"],
 input[type="button"],
 button { -webkit-appearance: none; }

这样1来就不容易为这样的难题头痛了。
假如你都还没碰到，或你也在开发设计挪动端web，都期待你记牢这个小窍门，由于当你在制做中碰到这样的难题时，不容易为此抓破头发，能处理你难题。最终期待大伙儿喜爱这篇文章内容，假如你感觉对你有一定的协助，能够强烈推荐给你的盆友，感谢阅读文章。