纯css实现CheckBox自定义样式

最新推荐文章于 2025-06-17 06:15:00 发布

原创最新推荐文章于 2025-06-17 06:15:00 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #checkbox样式

css 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文详细介绍了一种自定义复选框样式的实现方法，通过隐藏默认的输入元素并使用伪元素来创建独特的视觉效果。文章展示了如何使用CSS来定制复选框的外观，包括背景颜色、边框、阴影和旋转的勾选标记。

先效果图：

代码：

<label class="checkBoxStyle" >
  <input class="inputstyle" type="checkbox" name="checkList" value="222" v-model="checkedVal"/>
  <span class="spanStyle inputStyleDemo"></span>
</label>

样式：

.checkBoxStyle{
  display:inline-block
}
.inputstyle{
  display:none
}
.inputStyleDemo{
  background-color:#fff;
  border:0.02rem solid #007cf7;
  box-shadow: 0px -1px 0px 0px #85afd8 inset,   /*上边阴影  红色*/
              -1px 0px 0px 0px #85afd8 inset,   /*左边阴影  绿色*/
              1px 0px 0px 0px #85afd8 inset,    /*右边阴影  蓝色*/
              0px 1px 0px 0px #85afd8 inset;    /*下边阴影  黄色*/
  border-radius:0.08rem;
  overflow: hidden;
  display:block;
  height:0.4rem;
  width:0.4rem;
  position: relative;
  box-sizing: border-box;
}
.inputstyle:checked + .inputStyleDemo:after{
  content: '';
  position: absolute;
  border-color: #007cf7;
  border-style: solid;
  border-width: 0 0.04rem 0.04rem 0;
  width: 0.12rem;
  height: 0.24rem;
  top: 0;
  left: 0.11rem;
  transform: rotate(45deg);
}