关注前端开发
关注用户体验

CSS3 iphone式开关的推荐写法

话说这个问题纠结了近一个小时,为什么呢?看看就知道了。

在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题。

Tip:请使用Chrome查看以下案例

点此查看实例展示

写啊写,html代码出来了:

<span class="onoff"><label><i></i></label></span>

然后,写啊写,css代码也出来了,但是总会出现这样的问题:

原因:给外层写了overflow:hidden,但是没有把其内部截断,因为是圆角的,所以这个问题困扰了一会,后来发现这个问题在Firefox下是不存在,但这并不能解决此问题,因为这个是移动端项目,木有Firefox的事儿。

搜啊搜,找啊找,一个不错的方法解决了这个问题:-webkit-mask-image,在chrome下测试完美!

But,当上到iphone测试的时候这个问题却没有得到解决,so,可以肯定IOS5中的浏览器对-webkit-mask-image还没有做到好的支持。

继续搜索,这次我只相信英文了,搜索词是“webkit overflow hidden”,ok,第一个就是我想要的结果,查看

看了看代码,很简洁,但似乎我的问题还是没有得到解决,随后又换个思路,把position给去掉试试,结果只有当把外层和内部元素的所有position属性给去除才得以解决。

结论:css 的position属性会给webkit核心浏览器的overflow照成失效。

好吧,之前的写法这里就不说了,因为大量用到css的position进行模块定位,导致外层overflow失效,鉴于此,更改写法,以下是css部分:

.onoff{
overflow: hidden;
display: inline-block;
margin:0 0 -5px 15px;
width: 60px;height:20px;
border-radius: 20px;
border: solid 1px #999;
}
.onoff label{
display: block;
margin-left: -40px;
width: 100px;height: 20px;
text-align: right;color: #8B8B8B;border-radius:20px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DFDFDF),color-stop(1,#FEFEFE));
}
.onoff label::after{
position: relative;left:-17px;top: -20px;
display: inline-block;
content: '';width: 6px;height: 6px;
border: solid 2px #999;
border-radius: 10px;
}
.onoff i{
display: block;
width: 60px;height: 20px;
border-radius:20px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FE7D00),color-stop(1,#FEA753));
}
.onoff i::before{
position: relative;top: -7px;left:-15px;
display: inline-block;
content: '';width: 2px;height: 10px;
background-color: #fff;
}
.onoff i::after{
position: relative;top: -1px;left:1px;
display: inline-block;
content: '';width: 20px;height: 20px;
border: solid 1px #999;
border-radius: 50px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DADADA),color-stop(1,#FAFAFA));
box-shadow: inset 0 0 1px #fff;
}

点此查看实例展示

嗯,问题解决,有更好方法的同学可以留言交流,移动web还是很好玩的。

赞(2)
未经允许不得转载:大前端 » CSS3 iphone式开关的推荐写法
分享到: 更多 (0)

评论 35

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #26

    You want saying thanks to everyone once more for that gorgeous tips a person supplied Jeremy when preparing a post-graduate investigation plus, most of all, related to providing the many tips in the blog post. When we experienced recognized of the website a year ago, i’d personally are already stored the particular pointless steps i was employing. Thanks to you.

    Delilah Swanhart2周前 (05-14)回复
  2. #25

    What¡¦s Going down i am new to this, I stumbled upon this I’ve discovered It absolutely useful and it has helped me out loads. I am hoping to give a contribution & aid other users like its helped me. Great job.

    Nonton Anime2周前 (05-11)回复
  3. #24

    I have been checking out many of your posts and it’s nice stuff. I will surely bookmark your site

    cat2周前 (05-08)回复
  4. #23

    I discovered your site web site on bing and check many of your early posts. Maintain up the really good operate. I just additional your Feed to my MSN News Reader. Looking for forward to reading a lot more from you finding out later on!…

    Valentine Randle2个月前 (04-08)回复
  5. #22

    Spot on with this write-up, I honestly feel this site needs a great deal more attention. I’ll probably be returning to see more, thanks for the info!

    DMC52个月前 (03-31)回复
  6. #21

    Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, as well as the content!

    my singing monsters2个月前 (03-28)回复
  7. #20

    Hey! Would you mind if I share your blog with my zynga group? There’s a lot of folks that I think would really enjoy your content. Please let me know. Cheers

    Waldo Gaudioso3个月前 (03-11)回复
  8. #19

    移动的体验很多在于小细节的

    bdluntan6年前 (2013-11-20)回复
  9. #18

    感觉这个不难啊,用的最多的就是个border-radius,背景那个或黄或浅灰的框用个div什么的,那个圆圈按钮来个span什么的,设置一样的圆角,渐变嘛也用CSS3。。然后还有个显示I或O的标签,总共3个标签即可。。。理论上不难,不过我要去实践一下先。

    谢谢先,正在学CSS3,在这里找到很多好东西

    十年灯7年前 (2012-10-10)回复
  10. #17

    1.按键太小不利于用户体验,改变下思路把整个区块变成按钮好多了;
    2.选择项按钮需要后台支持吧,现在的代码后台支持比较困难;
    3.现在纯css3实现了rollover开闭的半成品吧,后期8成需要jquery等的支持,
    如果熟悉jquerymobile的话可以轻松实现。
    代码如下

    Sample

    屏幕保护

    屏幕保护开启
    屏幕保护关闭

    syo7年前 (2012-10-09)回复
    • 好吧貌似插入代码不行。直接贴吧

      Sample

      屏幕保护

      屏幕保护开启
      屏幕保护关闭

      syo7年前 (2012-10-10)回复
    • 好吧,貌似直接贴代码也不行,不过这样一个回复要审核3天?
      你们网站的效率让人汗颜,用户体验啊…

      syo7年前 (2012-10-12)回复
  11. #16

    对移动设备的支持 现在需求越来愈大了

    倡萌7年前 (2012-09-13)回复
  12. #15

    纯CSS,牛逼

    跑调的包子7年前 (2012-09-12)回复
  13. #14

    结论:css 的position属性会给webkit核心浏览器的overflow照成失效。

    这个不仅仅 是 webkit 失效吧。。。。。。

    令昔7年前 (2012-09-08)回复
    • 测试来看,只发现了对webkit失效

      浩子7年前 (2012-09-10)回复
  14. #13

    好强大啊。。。

    潮乐购7年前 (2012-09-08)回复
  15. #12

    浩哥,想问下,那个“点击查看实例演示”,你是一个一个上传上去吗?还是有插件?

    salman7年前 (2012-09-07)回复
  16. #11

    有了这么多浏览器不说,又冒出来个手机。唉。

    wmtimes7年前 (2012-09-06)回复
  17. #10

    没有点击状态啊。

    大猪7年前 (2012-09-05)回复
  18. #9

    整体很不错

    老钱7年前 (2012-09-02)回复
  19. #8

    图片质量很差,感觉好多锯齿哦

    热血洒红尘7年前 (2012-09-01)回复
  20. #7

    请问浩子同学你的查看实例是怎么实现的?

    zp7年前 (2012-09-01)回复
  21. #6

    手机端还未接触过

    网站制作7年前 (2012-08-31)回复
  22. #5

    好久不来了,过来看看…..顶顶哦….

    格桑7年前 (2012-08-30)回复
  23. #4

    请教一个问题,为什么d4在chrome下打开页面时框架是滚动定位的?描述的不清楚,你看一下 i5si.com ,我找了很久没找到问题原因。

    hiswing7年前 (2012-08-30)回复
  24. #3

    CSS真的是好强大啊

    大猫7年前 (2012-08-29)回复
  25. #2

    不错,感觉还是有点粗糙。

    hiswing7年前 (2012-08-29)回复
    • 这个要在移动设备上看很好的

      浩子7年前 (2012-08-29)回复
  26. #1

    之前看了个老外的 http://proto.io/freebies/onoff/ ,有很多瑕疵,特别是开关切换的时候会截断,这个完美不错啊。

    LYuShine7年前 (2012-08-29)回复
    • 只要把那个圆圈的大小调的和外面的框一样大就看不出截断了

      小白7年前 (2012-08-29)回复

themebetter 国内更好的WordPress主题服务商

立即前往