HTML/CSS 自定义开关按钮控件(switch)样式

今天这篇文章给大家带来的是在移动端很常见的开关按钮控件。样式主要是通过CSS来定制完成，上一篇博客讲的是自定义滑动条的样式，同样是自定义样式，上一篇是直接通过CSS对 input[type="range"]进行样式改造，而今天这一篇实现思路是上一次提到过的另一种方案，将input[type="checkbox"] 控件隐藏，通过其他标签来完成样式的定制。这样做的好处就在于更加的灵活，这是我们今天所要达到的效果。下面就让我们一起来看看怎么实现吧。

1.编写HTML代码

HTML的代码很简单，下面直接贴出来，再做一个简单的介绍。

① label标签的for属性有什么用？

for属性可以与表单元素配对，而这里我们将其与 input[type="checkbox"] 绑定，也就是说当点击label时，input[type="checkbox"] 会获得焦点，这样隐藏了checkbox之后，也同样能实现其状态的切换，即我们控件的on/off状态。for属性里填写想要绑定的表单元素的id。

② 上述代码中的data-on和data-off是干什么的？

这两个属性用于switch控件上显示的文字，后面的CSS代码会提到。

2. 编写CSS代码

还是先将代码直接贴出来，再做详细的介绍。

.testswitch {
    position: relative;
    float: left; 
    width: 90px;
    margin: 0;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none;
}

.testswitch-checkbox {
    display: none;
}

.testswitch-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    border: 2px solid #999999; 
    border-radius: 20px;
}

.testswitch-inner {
    display: block; 
    width: 200%; 
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

.testswitch-inner::before, .testswitch-inner::after {
    display: block; 
    float: right; 
    width: 50%; 
    height: 30px; 
    padding: 0; 
    line-height: 30px;
    font-size: 14px; 
    color: white; 
    font-family: 
    Trebuchet, Arial, sans-serif; 
    font-weight: bold;
    box-sizing: border-box;
}

.testswitch-inner::after {
    content: attr(data-on);
    padding-left: 10px;
    background-color: #00e500; 
    color: #FFFFFF;
}

.testswitch-inner::before {
    content: attr(data-off);
    padding-right: 10px;
    background-color: #EEEEEE; 
    color: #999999;
    text-align: right;
}

.testswitch-switch {
    position: absolute; 
    display: block; 
    width: 22px;
    height: 22px;
    margin: 4px;
    background: #FFFFFF;
    top: 0; 
    bottom: 0;
    right: 56px;
    border: 2px solid #999999; 
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}

.testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
    margin-left: 0;
}

.testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
    right: 0px; 
}

① transition属性的有什么含义？

transition是CSS3中的属性。W3C标准中对其是这样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

下面简单的介绍一下这个属性，它的语法是这样的

transition: transition-property transition-duration transition-timing-function transition-delay;

各个值的含义：

值	描述
transition-property	用于设置过渡的效果
transition-duration	完成过渡效果所需的时间(秒或毫秒)
transition-timing-function	规定速度效果的速度曲线
transition-delay	规定过渡效果开始的时间

② ::before和::after这两个伪元素的作用是什么？

使用::before选择器将某些内容插入到每一个被选择的元素之前，则::after则是将某些内容插入到被选择的元素之后。然后可以利用content这个属性来定义要插入的内容。也就是说我们这个控件一开始ON和OFF就已经插入到
testswitch-inner的前后了，只是通过设置margin等属性来控制其显示的内容。

③ 上述CSS代码中content属性里的attr(data-on)和attr(data-off)是什么？

attr()是取值函数，顾名思义通过这个函数可以得到属性值。

④ CSS代码末尾出现的两个加号(+)有什么作用？

加号(+)称为相邻兄弟选择器（Adjacent sibling selector），可选择紧接在某一元素后的元素，且二者有相同父元素。而最后两段CSS代码的作用则是，当checkbox被选中时，将testswitch-inner的margin-left设为0，也就是将::after的内容显示出来；将testswitch-switch设置为距离右边0px，也就是将小圆点右移，初始位于左边。

3. 添加监听事件

当点击switch控件时，其状态将会发生改变，而想要针对不同的状态做出不同的处理，这就需要依靠监听事件来完成了，代码也十分的简单，只需判断一下当前的状态，并作出相应的操作即可。

$(document).ready(function() {
	$("#onoffswitch").on('click', function(){
		clickSwitch()
	});

	var clickSwitch = function() {
		if ($("#onoffswitch").is(':checked')) {
			console.log("在ON的状态下");
		} else {
			console.log("在OFF的状态下");
		}
	};
});

① $(document).ready(function(){ })的作用什么？

jQuery事件，当页面内容(DOM)都加载完才执行$(document).ready 里的代码，如果不写这个，可能在绑定事件时页面还未加载好，选择器找不到相应元素自然也就绑定不了事件。

到这儿，这篇简单的博客就结束了，同样地如果文章中存在错误，还是希望大家指正，或者有更好的思路，提出来让我进一步的学习。希望以后能写出更优质的文章与大家分享。