checkbox的妙用

前言

今天在B站看到了一个分享按钮的制作，简单看了一下发现里面有一个很有意思的点

HTML结构

<div class="mainbox">
  <input type="checkbox" id="check" />
  <label for="check">分享</label>
  <div class="media-icons">
    <a href="#">QQ</i></a>
    <a href="#">Wechat</i></a>
    <a href="#">Weibo</i></a>
    <a href="#">TikTok</i></a>
  </div>
</div>

不难看出这边使用了一个checkbox和一个label，两者相互关联，点击label就会触发checkbox的checked，更便于写CSS

CSS部分

/* 这里用伪元素来做了一下label被点击之后的效果 */
label::before {
  content: '取消';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 35px;
  opacity: 0;
}

#check {
  display: none;
}

/* 这里非常巧妙的用checkbox的状态来控制伪元素 */
#check:checked ~ label::before {
  opacity: 1;
}

后记

如果让我来做的话我可能会用JS去监听label，点击之后通过class来切换状态，能想到用checkbox实属妙极