前言

昨天我们通过：hover选择其实实现一个鼠标划入，显示tips的效果。如果年看过的话，应该会对css有一个新的认识了。今天我们要介绍另外一个选择器，：checked。

：checked

:checked：作为表单节点中选中后选项的状态，用于<input>的type设置成radio和checkbox的时候，模拟鼠标的点击事件。

实现

实现其实不是很难，主要还是通过：checked选择器来控制按钮的位置，以及背景色.

当点击的时候，会触发：checked，这个时候可以做一些自己的操作，进行按钮的滑动，动效，背景色等等。
当再次点击的时候取消，checked状态，这个就走你的默认样式，默认样式也可以根据自己的需求来，比如一个开关的关闭状态，再或者可以加上提示文字等等，这里不在赘述。

代码如下：

// HTML
<input class="input-switch" type="checkbox">

// CSS
.com {
  width: 102px;
  height: 62px;
  border-radius: 31px;
  background-color: red;
}
.input-switch {
  position: relative;
  margin: 200px;
  appearance: none;
  cursor: pointer;
  transition: all 100ms;
  @extend .com;
  &::before {
    position: absolute;
    content: "";
    transition: all 300ms cubic-bezier(.45, 1, .4, 1);
    @extend .com;
  }
  &::after {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 1px 1px 5px rgba(#000, .3);
    content: "";
    transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
  }
  &:checked {
    background-color: #5eb662;
    &::before {
      transform: scale(0);
    }
    &::after {
      transform: translateX(40px);
    }
  }
}

好，今天就到这里了,一会要去吃好吃的了，我得赶紧去了，拜了个拜，再见各位。今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！

CSS之选择器（五）

前言

：checked

实现