如何更换checked的背景颜色

最新推荐文章于 2023-09-25 14:35:39 发布

qq_36392571

最新推荐文章于 2023-09-25 14:35:39 发布

阅读量738

点赞数

分类专栏：项目过程问题

本文链接：https://blog.csdn.net/qq_36392571/article/details/91493121

版权

项目过程问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

思路：
把input的定位设为相对定位，通过将伪元素after设为绝对定位对input进行覆盖。
.checkbox{
  width: .32rem;
  height: .32rem;
  position: relative;
}
.checkbox:after{
  position: absolute;
  top:0;
  left: 0;
  content: "";
  width: .32rem;
  height: .32rem;
  line-height: .32rem;
  background-color: #ffffff;
  color: #000000;
  display: inline-block;
  visibility: visible;
  border-radius: 3px;
  border: .01rem solid #000000;
}
.checkbox:checked:after{
  content: "✓";
  font-size: .4rem;
  text-align: center;
}

结果图：