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


<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")

你可能感兴趣的:(纯CSS,css)