如何美化checkbox

前言

对于前端开发人员，checkbox应该是经常见到的东西。利用checkbox的checked属性，我们可以做出很多精彩的效果，之前还用checkbox来做动画暂停。前几天还看到外国大佬使用 checkbok做游戏：http://www.bryanbraun.com/2021/09/21/… ，真的是佩服的五体投地，不过对于我这种菜鸡选手，还是只能实现一些简单的东西。对于下面的这个switch按钮，大家应该非常熟悉了，同样的在这个效果上还衍生出了各种华丽花哨的效果，例如暗黑模式的切换。一生万，掌握了一，万！还不是手到擒来。

推荐大家看看codepen上的这个仓库：文章封面的效果，也是从这里录制的！
tql
codepen.io/oliviale/pe…

标签

这里使用for将label和input捆绑

<input type="checkbox" id="toggle" />

<label for="toggle"></label>

同时设置input不可见

input {

    display: none;

}

美化label

遇到checkbox的美化问题，基本上都是考虑用美化labl替代美化input。

设置背景颜色，宽高，以及圆角

.switch {

    display: inline-block;

    display:relative;

    width: 40px;

    height: 20px;

    background-color: rgba(0, 0, 0, 0.25);

    border-radius: 20px;

}

最终的效果如下：

切换的圆

在label上会有一个圆，一开始是在左边的，效果如下，其实这个只需要利用伪元素+positon定位，就可以实现了。

这是postion：absolute，同时将位置定位在top1px，left1px。同时设置圆角。

      .switch:after {

        content: "";

        position: absolute;

        width: 18px;

        height: 18px;

        border-radius: 18px;

        background-color: white;

        top: 1px;

        left: 1px;

        transition: all 0.3s;

      }

checked+小球右移动

这里点击之后圆会跑到右边，这里有两种实现方案

1.仍然通过定位

当checkbox处于checked状态，会设置top,left,bottom,right。这里将top，left设置为auto是必须的，这种的好处就是，不需要考虑label的宽度。

  input[type="checkbox"]:checked + .switch:after {

        top: auto;

        left: auto;

        bottom: 1px ;

        right: 1px ;

      }

当然知道label的宽度可以直接,设置top和left

top: 1px;

left: 21px;

2.translateX

*transform: translateX(20px)*

美化切换后的label

加上背景色

input[type="checkbox"]:checked + .switch {

background-color: #7983ff;

}

效果：

后记

看上去本文是一篇介绍一个checkbox美化的效果，其实是一篇告诉你如何美化checkbox的文章，最终的思想就是依赖for的捆绑效果，美化label来达到最终的效果。