自定義 checkbox 樣式

scutwang發表於2013-09-16

前言：最近在做一個網站，為了統一風格，需要自定義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

 

 

相關文章