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

Dear 丶 2022-07-21 12:13 670阅读 0赞

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

# 1.编写HTML代码 #

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

<!DOCTYPE html>
    <html>
    	<head>
    		<title>demo</title>
                    <script type="text/javascript" src="lib/jquery.js"></script>
                    <script type="text/javascript"src="js/on_off_switch.js"></script>
                    <link rel="stylesheet" href="css/on_off_switch.css" type="text/css">
    	</head>
    
    	<body>
    		<div class="testswitch">
    			<input class="testswitch-checkbox" id="onoffswitch" type="checkbox">
    			<label class="testswitch-label" for="onoffswitch">
    				<span class="testswitch-inner" data-on="ON" data-off="OFF"></span>
    				<span class="testswitch-switch"></span>
    			</label>
    		</div>
    	</body>
    </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;

各个值的含义：

<table> 
 <tbody> 
  <tr> 
   <td>值</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td><span style="font-size:18px">transition-property</span></td> 
   <td>用于设置过渡的效果</td> 
  </tr> 
  <tr> 
   <td><span style="font-size:18px">transition-duration</span></td> 
   <td>完成过渡效果所需的时间(秒或毫秒)</td> 
  </tr> 
  <tr> 
   <td><span style="font-size:18px">transition-timing-function</span></td> 
   <td>规定速度效果的速度曲线</td> 
  </tr> 
  <tr> 
   <td><span style="font-size:18px">transition-delay</span></td> 
   <td>规定过渡效果开始的时间</td> 
  </tr> 
 </tbody> 
</table>

**② ::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 里的代码，如果不写这个，可能在绑定事件时页面还未加载好，选择器找不到相应元素自然也就绑定不了事件。

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

[Link 1]: http://blog.csdn.net/u013347241/article/details/51560290
[Center]: /images/20220720/a7f4e821b3dd41fcb233446b43fb7683.png