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

前言

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

正文

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

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

原理

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

首先定义我们的HTML结构

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

外层用一个divcheckboxlabel包裹起来,接下来我们把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(自定义属性名)来获取文本值

最后

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

好了,本文到此结束,希望对你有帮助 🙂

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

关注

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