【前端帮帮忙】第4期 使用纯CSS制作一个开关按钮

前言

开关组件是我们在移动端页面很常用的一个组件，特别是在一些设置页面。

正文

我们打开手机，进入设置，随便打开一个页面，都能看到使用了很多的开关组件，如图：

今天我们就用纯CSS来实现这样一个组件。

首先，我们先分析一下原理，其实就是使用<label>标签配合<input type=checkbox />复选框来实现的，label的for属性会间接触发checkbox的点击切换，从而动态更改开关的样式。

首先定义我们的HTML结构

<div class="switch-box"">
	<input class="switch-input" type="checkbox" id="switch-input">
	<label class="switch-label" for="switch-input"></label>
</div>
复制代码

外层用一个div把checkbox和label包裹起来，接下来我们把checkbox标签隐藏起来，然后开关的样式都写在label标签上。

外围容器div的样式

.switch-box {
  position: relative;
  display: inline-block;
  height: 30px;
}
复制代码

checkbox标签的样式

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
复制代码

然后是开关默认的样式（也就是关闭时候的样式）

.switch-label {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  background-color: #e3e3e3;
  border-radius: 20px;
}
复制代码

里面的小圆需要配合伪元素:after或:before来实现

.switch-label:after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  content: "";
}
复制代码

来看下现在的效果

然后我们怎么使开关切换到打开的状态呢？上面说过了，checkbox的:checked结合~兄弟元素选择器来实现，代码如下：

.switch-input:checked ~ .switch-label {
  background-color: #05abc1;
}

.switch-input:checked ~ .switch-label:after {
  left: 33px;
}
复制代码

好了，我们来看下实际效果：

可以看到切换效果有点生硬，我们给它加上点缓动的效果，体验更好，给.switch-label和它的伪元素:after都加上transition属性，代码如下

transition: .3s;
复制代码

再来看下效果

这样一个开关，我们就实现了，还是比较简单的。

拓展

假如，有一天产品经理或设计师过来跟我们说，要在开关的旁边加上文字提示，我们怎么做？比如这种

其实要实现这个功能，也不难，我们再定一个<span>标签，用来放文字提示，放到容器里，代码如下

<span class="switch-txt" data-open-txt="已启用" data-close-txt="已禁用"></span>
复制代码

这边使用了data-来自定义我们的属性，给其加点样式

.switch-txt {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

.switch-txt:after {
  content: attr(data-close-txt);
}
复制代码

上面代码说明，我们开关的默认状态是关闭的状态，这边也是使用了伪元素来定义开关默认的文字提示，通过content: attr(自定义属性名)就可以获取到自定义属性的值，真的是很方便。来看下现在的效果

可以看到，我们的文字提示已经显示出来了，最后我们只要开关切换到开启状态改变下文字就可以了，也是通过checkbox的:checked来实现，代码如下

.switch-input:checked ~ .switch-txt:after {
  content: attr(data-open-txt);
}
复制代码

最后，来看下最终效果

总结

1. checkbox:checked选中后更改label的样式
2. transition为其加上缓动效果
3. 通过data-自定义文本提示，伪元素里通过content: attr(自定义属性名)来获取文本值

最后

感谢耐心读完，如果还有什么疑问或者建议，可以多多交流。

好了，本文到此结束，希望对你有帮助 :)

原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

关注

本文章首发在我的公众号“前端帮帮忙”，感谢关注，大家一起学习进步！