CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子:
初载入页面后,表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子:
奇怪的是你点击以后就会正常:
或许很多同学会认为我的样式代码没写好,那么想让大家知道是怎么一回事,先来看看我写的代码:
input[type="submit"]和input[type="reset"]样式代码:
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 在Styling Submit Buttons for Mobile Safari 中介绍的内容和我碰到的问题可真是一模一样,按其方法在样式中加入:
复制代码代码如下:.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,都希望你记住这个小技巧,因为当你在制作中碰到这样的问题时,不会为此抓破头皮,能解决你问题。最后希望大家喜欢这篇文章,如果你觉得对你有所帮助,可以推荐给你的朋友,谢谢阅读。
相关文章
- 这是一款基于css3实现的iPhone X手机桌面背景图片切换效果源码。底部排列着各个图片的缩略图,上方是iPhone X手机界面,手机中可看到背景图的清晰照片效果。点击下方的缩略2017-11-30
- 纯CSS3仿iPhone文件夹特效源码是一款纯css3绘制苹果手机iPhone界面样式,点击app文件夹可以打开展示,和iPhone桌面的打开效果很类似。本段代码可以在各个网页使用,有需要2017-11-30
- 这是一个基于纯CSS3的iPhone X背景切换动画特效,以淡入淡出为主,iPhone X屏幕的背景和页面的背景交相呼应,逼真炫酷2017-11-16
jQuery+CSS3实现iPhone手机锁屏解锁动画特效源码
jQuery+CSS3实现iPhone手机锁屏解锁动画特效源码是一款基于jQuery+CSS3实现的苹果手机模型,控制鼠标滑动来实现手机解锁进入主界面。本段代码可以在各个网页使用2017-09-20构建iPhone企业级应用-基于HTML,CSS和JavaScript pdf扫描版
笔者斯塔克会演示如何利用这些web技术设计和开发iphone以及iphone touch平台的应用程序,而不必使用obiective-c或者cocoa2013-10-22- 纯CSS3模拟iPhone4界面及滑动解锁,没有过多的使用图片,能做出这种效果的确不错了2012-05-08
- CSS3+jQuery 模拟 ios 天气显示功能,仿iphone(苹果)手机(或Android系统手机)的天气预报显示效果,带动画效果的天气显示功能,非常的漂亮2012-02-12
- 这篇文章主要介绍了纯 CSS 画 iphone,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
最新评论