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

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还是很好玩的。

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

评论 28

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

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

    bdluntan4年前 (2013-11-20)回复
  2. #18

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

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

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

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

    Sample

    屏幕保护

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

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

      Sample

      屏幕保护

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

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

      syo5年前 (2012-10-12)回复
  4. #16

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

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

    纯CSS,牛逼

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

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

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

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

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

    好强大啊。。。

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

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

    salman5年前 (2012-09-07)回复
  9. #11

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

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

    没有点击状态啊。

    大猪5年前 (2012-09-05)回复
  11. #9

    整体很不错

    老钱5年前 (2012-09-02)回复
  12. #8

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

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

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

    zp5年前 (2012-09-01)回复
  14. #6

    手机端还未接触过

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

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

    格桑5年前 (2012-08-30)回复
  16. #4

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

    hiswing5年前 (2012-08-30)回复
  17. #3

    CSS真的是好强大啊

    大猫5年前 (2012-08-29)回复
  18. #2

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

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

      浩子5年前 (2012-08-29)回复
  19. #1

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

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

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

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

立即前往