用iconfont修改checkbox样式

最新推荐文章于 2026-06-08 04:56:45 发布

原创最新推荐文章于 2026-06-08 04:56:45 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#checkbox

收录于

css 专栏收录该内容

1 篇文章

订阅专栏

本文为前端新手提供了一个简单的示例，展示了如何使用HTML和CSS创建一个基本的复选框样式，并通过伪元素实现点击效果。

<lable class="checkbox">
    <input type="checkbox">
    <i class="iconfont  icon-check"></i>
</lable>


<style>
    input{
        width: 16px;
        height: 16px;
        opacity: 0;
        position: absolute;
        top:-3px;
        left:-3px;
    }
    i{
        color:#cccccc;
    }
    .checkbox{
        position: relative;
    }
    input:checked + i:before{
        content:'\e620';
        color:#2db7f5;
    }
</style>