纯css美化复选框史上最简单的方法

最新推荐文章于 2022-10-19 16:58:08 发布

front_end_fan

最新推荐文章于 2022-10-19 16:58:08 发布

阅读量3.6k

点赞数 2

分类专栏：纯CSS css 文章标签： css 复选框美化复选按钮

本文链接：https://blog.csdn.net/qq_39198420/article/details/78911793

版权

css 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

纯CSS

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input.cbox {
            -webkit-appearance: none;
            width: 16px!important;
            height: 16px!important;
            display: inline-block;
            margin: -3px 5px 0 0!important;
            cursor: pointer;
            vertical-align: middle;
            background: url(../images/checkbox.svg) no-repeat;
        }
        input.cbox:checked {
            background: url(../images/checkbox-checked.svg) no-repeat;
        }
    </style>
</head>
<body>
<input type="checkbox" class="cbox"/>
</body>
</html>

效果图：
这里写图片描述

这里写图片描述

用图片方式实现复选框优点：

不会有任何兼容性问题，而且个浏览器样式显示完全一样；
代码超级简洁，减少加载负担；
方便jquery来捕捉选中状态：$("input.cbox:checked")

front_end_fan

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
纯css美化复选框史上最简单的方法

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> input.cbox { -webkit-appearance: none; width: 16px!important;
复制链接

扫一扫

专栏目录