【前端帮帮忙】第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(自定义属性名)来获取文本值

最后

感谢耐心读完，若是还有什么疑问或者建议，能够多多交流。

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

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

关注

本文章首发在个人公众号“前端帮帮忙”，感谢关注，你们一块儿学习进步！