自定义复选框

最新推荐文章于 2024-08-22 16:31:39 发布

weixin_34187862

最新推荐文章于 2024-08-22 16:31:39 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b769198518825332755c6ab

本文介绍了一种使用纯CSS实现自定义复选框样式的技巧，通过隐藏默认的复选框并用背景图片替代的方式，实现了外观更加美观且易于定制的复选框效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.checkboxStyle1 {
    position: absolute;
    top: 1px;
    left: -2px;
    display: inline-block;
    padding: 15px;
    background: url(../img/check2.png) no-repeat;
}
.cyyChecked:checked+.checkboxStyle1{
    background: url("../img/check1.png") no-repeat ;
}
.cyy-add-checkbox input[type="checkbox"]{
    visibility: hidden;//去掉复选框默认样式
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    margin:1px 0 0;
}

<label class="cyy-checkbox">
    <input type="checkbox" class="cyyChecked" value="3">
    <span class="checkboxStyle1"></span>
</label>
复制代码