使用css将checkbox 改造成开关

最新推荐文章于 2022-11-14 18:18:17 发布

~，555555

最新推荐文章于 2022-11-14 18:18:17 发布

阅读量359

点赞数

分类专栏：前端学习文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44717047/article/details/120005569

版权

前端学习专栏收录该内容

84 篇文章 3 订阅

订阅专栏

input[type="checkbox"] {
  position: relative;
  border: none;
  appearance: none;
  background: #fff;
  outline: none;
  width: 80px;
  height: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  background-color: #303030;
  transform: scale(1.1);
  border-radius: 20px;
  transition: 750ms ease all;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

input:checked[type="checkbox"]::before{
  background-color: #fff;
  left: 52px;
}