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

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

原创最新推荐文章于 2024-04-02 11:10:24 发布 · 9.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

部署运行你感兴趣的模型镜像

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;
}

效果图：