关注前端开发
HTML5、CSS3、Javascript

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式开关的推荐写法

分享: