自定义 checkbox 样式

前言：最近在做一个网站，为了统一风格，需要自定义checkbox的样式。所以花了点时间参考了 研究了一下。感觉上面的方法略微麻烦。所以自己重新写了下面的代码，欢迎大家指教。同时，感谢w3cplus提供的原始教程和图片。

 

（1）主要的原理是：

　　使用clip属性，将checkbox的默认显示框隐藏，然后，使用bg.png 中的图片来显示他的状态（选中/未选中）；当每一次点击时，jquery检查是否选中，如果未选中，则将图片替换为选中状态；否，则相反。（目测，比w3cplus上的代码少了一些。）

在这里就不写radio的样式了。毕竟大同小异。详细建议点击 w3cplus 。

 

（2）效果图如下：

点击前：

点击后：

 

（3）主要代码（最后有一个源码链接）：

　　主要的HTML代码：

<form >
    <label for="checkbox_1"><input type="checkbox" id="checkbox_1" value="1">第一个选项</label>
    <label for="checkbox_2"><input type="checkbox" id="checkbox_2" value="2">第二个选项</label>
</form>

　　接下去是CSS样式：

<style type="text/css">
        form { 
                width: 300px; 
                margin:20px auto;
                padding: 20px;
                background-color: #0064cd;
                display: relative;
                
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
                background-image: -webkit-linear-gradient(#049cdb, #0064cd);    
                -webkit-border-r+adius: 10px; 
                -moz-border-radius: 10px; 
                -khtml-border-radius: 10px; 
                border-radius: 10px;
                -webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
                -moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
                -khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); 
                box-shadow: 0 5px 12px rgba(0,0,0,.4); 
            }

        label{
            display: block;
            margin: 20px;
            padding: 0px 25px;
            height: 1.5em;
            background: url("bg.png") no-repeat;
            background-position: 0 -100px;
            overflow: hidden;
        }
        label.check{
            background-position: 0 -150px;
        }

        label input{
            position: absolute;
            clip: rect(0 0 0 0);
        }

    </style>

　　最后是jquery代码：

<script src="jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("label").click(function(){
                if ($(this).hasClass("check")) {
                    $(this).removeClass("check");
                    return false;
                }else{
                    $(this).addClass("check");
                    return false;
                }
                
            });
        });
        
    </script>

 

附：下载地址：http://vdisk.weibo.com/s/sYYrp7G62yQT