CSS3重置iphone浏览器按钮input,select等表单元素的默认样式
今天在公司写了⼀个登录页⾯效果，让我碰到⼀个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆⾓有⼀个bug”。下⾯我来简单的描述⼀下这个bug的
样⼦：
盖茨夫妇离婚由梅琳达提起申请初载⼊页⾯后，表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样⼦：
奇怪的是你点击以后就会正常：
或许很多同学会认为我的样式代码没写好，那么想让⼤家知道是怎么⼀回事，先来看看我写的代码：
input[type="submit"]和input[type="reset"]样式代码：
复制代码
代码如下:
.form-actions input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
color: #fff;
font-size: 24px;
margin: 5px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.form-actions input:hover{
background: rgb(74, 179, 198);
公务员考什么}
.form-actions input:active,
.form-actions input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
这样的代码在浏览器中浏览是完全没有问题的：
注：请使⽤safari测试上⾯代码。
可是上⾯的代码就在iPhone的Safari浏览器下出开头所陈述的问题。⼀下真不好如何动⼿解决，因为从来没有接触过，所以就⼀直没有碰到过。但问题出了，就要想办法解决，于是在GG上搜索“input submit for iPhone”，还真到了问题所在。 Keir Whitaker 在Sty新浪微博皮肤
复制代码
代码如下:国内空难最高赔偿多少钱
.form-actions input{
...
-
webkit-appearance: none;
}
更新到iPhone⼀看，真爽，问题解决了。
原来问题出在这⾥，iPhone上的safari解析input[type="submit"]和input[type="reset"]按钮会以苹果浏览器的默认UI渲染，这样就出现我刚才那种现像，我们在样式中明确的设置了button的圆⾓值，但到iPhone的safari上就不⽣效了。要想让他⽣效，就需要在样式中
复制代码
代码如下:
.form-actions input{
.
..
-webkit-appearance: none; }
在不同的“-webkit-appearance”选值情况下，button所渲染的效果是不⼀样的，详细的测试代码⼤家可使⽤safari浏览器点击这⾥。有关于“-webkit-appearance”的详细介绍，这回算是知道了，最后我建议⼤家，我们可以直接在“reset.css”样式⽂件中加处这么⼀句：学生票高铁打几折
复制代码
代码如下:
input[type="submit"],
input[type="reset"],
input[type="button"],
button { -webkit-appearance: none; }
这样⼀来就不会为这样的问题头痛了。
步步惊心 胡歌如果你还没有碰到，或者你也在开发移动端web，都希望你记住这个⼩技巧，因为当你在制作中碰到这样的问题时，不会为此抓破头⽪，能解决你问题。最后希望⼤家喜欢这篇⽂章，如果你觉得对你有所帮助，可以推荐给你的朋友，谢谢阅读。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论