这段时间工作的新需求,是做一个类似IOS开关按钮。用来显示是否选中。
如:
默认未选中
默认选中
方法一:
CSS中通过:before、:after伪类美化checkbox按钮,来实现;
HTML:<input type="checkbox" class="check-switch check-switch-anim"/>
通过设置appearance属性值赋值为none;清楚原有checkbox的浏览器默认样式
注意:
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
IE各版本是彻底的不支持,没有替代属性。
CSS:
.check-switch {
// 清除原有样式
-moz-appearance: none;
-webkit-appearance: none;
// 清除元素外边款轮廓线
outline: none;
// 设置具备区块元素属性
display: inline-block;
// 按钮设置为手型
cursor:pointer;
// 设置宽度
width: 39px;
// 设置高度
height: 20px;
position: relative;
// 边框
border: 1px solid #dfdfdf;
// 背景
background-color: #fdfdfd;
// 设置阴影效果
box-shadow: #dfdfdf 0 0 0 0 inset;
// 圆角
border-radius: 20px;
// 设置背景的绘制区域
background-clip: content-box;
}
// 中间圆圈样式
.check-switch:before {
// content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
// 此元素值为'' ,但是必须存在,否则将不显示中间那个圆圈
content: '';
width: 17px;
height: 17px;
// 脱离文档流
position: absolute;
// 设置位置
top: 0px;
left: 0;
// 圆角
border-radius: 20px;
// 颜色
background-color: #fff;
// 阴影效果
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
//checkbox元素被选中时的样式
.check-switch:checked {
// 边框颜色
border-color: #64bd63;
// 选中后的阴影效果
box-shadow: #64bd63 0 0 0 16px inset;
// 选中后的北京色
background-color: #64bd63;
}
// 在checkbox选中后,中间圆圈的便宜位置
.check-switch:checked:before {
left: 21px;
}
// 增加动画效果
.check-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.check-switch-anim:before {
transition: left 0.3s;
}
.check-switch-anim:checked {
box-shadow: #3C92DC 0 0 0 16px inset;
background-color: #3C92DC;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.check-switch-anim:checked:before {
transition: left 0.3s;
}
方法二:
由于方法一IE浏览器不支持appearance 属性并且没有替代属性,方法一不通过;
第二种方法,使用了label标签,使用label中的for属性关联checkbox,当label被点击时会触发checkbox
的点击事件,在同过CSS美化label。达到开关效果;label中的for可是很强大的,很好用
浏览器支持:
Firefox 支持。
Safari 支持
Chrome 支持
由于IE8及IE8以下不支持border-radius属性,没有圆角。
HTML:
<input type="checkbox" class="ch_t" id="ch1"/>
<label class="ch_label" for="ch1"></label>
逻辑:
1.将标签checkbox隐藏
2.label中for元素关联checkbox的id
3.设置label元素样式,before样式。。。
CSS:
.ch_t{
// 隐藏
display:none;
}
.ch_label{
// 设置label为块区域
display: inline-block;
width: 40px;
height: 19px;
// 背景色
background-color: #ccc;
// 圆角
border-radius: 20px;
// 去掉外边款样式
outline:none;
border: 1px solid #ccc;
}
// 获取checkbox是否选择并且关联到label标签上
.ch_t:checked + .ch_label{
background-color: #3C92DC;
}
// 选中后中间圆圈的便宜位置
.ch_t:checked + .ch_label:before{
left:44%;
}
// 通过before伪类实现
.ch_label:before{
position:relative;
top:-1px;
// content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
// 此元素值为'' ,但是必须存在,否则将不显示中间那个圆圈
content: "";
display: block;
width:50%;
height:100%;
background-color:#fff;
border-radius:20px;
border: 1px solid #ccc;
}
方法三:
由于IE浏览器版本比较多,各个IE的版本对CSS和HTML的支持都不同,很多属性都不可用。
虽然现在微软已经停止对IE各个版本的维护及更新,东家都放弃了,我们还在继续坚持兼容,悲剧。
所以要实现这种IOS开关的按钮功能,最简单最直接最粗暴的方法就是img,把它做成两张图片,通过JS点击事件控制图片显示隐藏。暴露的问题就是没有交互效果,而且图片加载也需要时间,占用的资源也大。
结语:还会继续寻找方法四、方法五。。。会持续更新。。。。