修改 input checkbox(复选框) 选中的背景颜色

最新推荐文章于 2024-04-02 11:10:24 发布

虫儿啊

最新推荐文章于 2024-04-02 11:10:24 发布

阅读量9k

点赞数 11

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/ruanxinjie/article/details/119670108

本文探讨了如何使用CSS优雅地创建现代且易于理解的checkbox样式，包括基本样式、选中状态的改变，以及一个实际的代码示例。焦点在于前端开发者如何提升用户体验和视觉一致性。

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

input[type=checkbox]{
    width: 16px;
    height: 16px;
    margin-top: 2px;
    position: relative;
}
input[type=checkbox]::after {
    position: absolute;
    top: 0;
    color: #000;
    width: 16px;
    height: 16px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: ' ';
    border-radius: 3px;
}
input[type=checkbox]:checked::after {
    content: "✓";
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    background-color: #42BEAD;
}

效果图：