CSS自定义控件之checkbox控件

checkbox自定义控件概述

这个控件属于html自带的控件，本身有样式。在制作这样的控件时，需要CSS和javascript两方面共同努力，才能实现全新的控件样式：CSS覆盖原有的样式、实现新的样式；JS实现点击等动作的动态显示。我们先看HTML结构，再一步步看CSS代码。

radio控件和checkbox控件的定义方式也是一样的流程。下面是checkbox的最终两种效果图：

HTML代码

    

        
        Checked
    

    

        
        Unchecked
    

     

        

            
            
        
    

    

        

            
            
        
    

input的id和label的for值需要设置，并且需要一致，主要用于后面的javascript，在下文谈到javascript的时候再说。

CSS代码

1. 设置custom-checkbox相对布局，并且对浏览器自带的checkbox样式进行处理。

    .custom-checkbox { position:relative;}
    .custom-checkbox input,.custom-radio input {  display: none;}
   

2. 全新的custom-checkbox主要是使用label来显示文字，并通过右移label，把新的check-box样式显示出来，这里主要把新的custom-chekbox用于label背景，我们看看是怎么做的，具体看代码的注释。

    .custom-checkbox label {
        display:block;          //设置为块级元素，否则显示会有问题
   
        height:27px; 
        line-height:27px; //通过行高和高度的设置，保证文字垂直居中
        
        padding-left:36px;  //将label的文字右移，为新的custom-chekbox样式预留空间
   
        margin-bottom:8px; 
   
        cursor:pointer;  //修改鼠标显示样式
        color:#6f6f6f;
    }
   

3. 放置新的custom-checkbox样式，并依据是否选中，设置不同的background-position，以显示不同状态下的custom-checkbox。

    .custom-checkbox label { 
        background:url(images/styled_checkbox.png) no-repeat; 
        background-position:-7px -10px; //custom-checkbox未选中状态
    }
   
    .custom-checkbox label.checked { 
        background-position:-7px -110px; //custom-checkbox选中状态
        color:#5c5c5c;
    }
   

4. 另一种样式的custom-checkbox。

    .checkbox-large .custom-checkbox label { 
        background:url(images/styled_checkbox_large.png) no-repeat; height: 37px; line-height: 33px; padding-left:95px;
        background-position:0 0;                //custom-checkbox未选中状态
    }
   
    .checkbox-large .custom-checkbox label.checked { 
        background-position:0 -100px;   //custom-checkbox选中状态
    }   
   

javascript代码

javascript代码主要响应用户的点击。这里面使用了jquery（或者更小的，通常移动端使用的，jquery替代版本——zepto.js）。这里使用jquery，主要是因为方便。当然，你也可以直接通过DOM操作来实现这里的功能，不过要稍微麻烦一些。

这里的javascript的思路就是依据input的checked状态，动态地为label添加checked类或者移除checked类。我们来看一下代码：

$('div[class=input_custom] input').each(function(){ //选择合适的input元素

    if($(this).is('[type=checkbox],[type=radio]')){ //此处的代码也适合自定义radio按钮
        var input = $(this); 
        var label = $('label[for='+input.attr('id')+']'); //还记得上面的html代码吗？此处就用到了input的id和label的for
        
        input.bind('updateState', function(){   
            input.is(':checked') ? label.addClass('checked') : label.removeClass('checked'); }) 
            .trigger('updateState')
            .click(function(){ $('input[name='+ $(this).attr('name') +']').trigger('updateState'); });//绑定点击事件
    }
});