如何美化checkbox
checkbox的使用场景并不一定是原生的勾选!!! 做游戏,切换开关switch,打分等等,都是使用场景,本文只是提出一种修改的方法,并不是唯一。你可以选择只修改前面那个框的方法。学技术的,不要被一种东西局限。
前言
对于前端开发人员,checkbox应该是经常见到的东西。利用checkbox的checked属性,我们可以做出很多精彩的效果,之前还用checkbox来做动画暂停。前几天还看到外国大佬使用 checkbok做游戏:https://www.bryanbraun.com/2021/09/21/i-keep-making-things-out-of-checkboxes/ ,真的是佩服的五体投地,不过对于我这种菜鸡选手,还是只能实现一些简单的东西。对于下面的这个switch按钮,大家应该非常熟悉了,同样的在这个效果上还衍生出了各种华丽花哨的效果,例如暗黑模式的切换。一生万,掌握了一,万!还不是手到擒来。
推荐大家看看codepen上的这个仓库:文章封面的效果,也是从这里录制的!
tql
https://codepen.io/oliviale/pen/xxboXzo
标签
这里使用for将label和input捆绑
<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>
同时设置input不可见
input {
display: none;
}
美化label
遇到checkbox的美化问题,基本上都是考虑用美化labl替代美化input。
设置背景颜色,宽高,以及圆角
.switch {
display: inline-block;
position: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来达到最终的效果。
- 点赞
- 收藏
- 关注作者
评论(0)