icheck插件给checkbox添加自定义效果

不得不说这个插件真的很好用，我原来应该也有写过用纯css制作checkbox的文章

http://blog.csdn.net/u010289111/article/details/51416289

好吧，我觉得应该是csdn编辑器的问题，我当时在编辑的时候，我的效果图片在上面是有的，但是我隔断时间去访问的时候，上面的图片就没有了。

这个真的还可以，效果大概是这样的

这个选中框真的是不丑的，只是因为有了这个背景色

而且使用也很简单，可以参考这个地址哈，毕竟是bootstrap的插件，我也不知道如果脱离这个框架的话是不是可以用哈

http://www.bootcss.com/p/icheck/

html:

<div class="checkbox f-fff">

                                < label class = "f-16" >< input type = "checkbox" checked = "checked" >记住密码</ label >

                                < a class = "turn-findpass f-16" >忘记密码？</ a >

                           </ div >

类名checkbox f-fff f-16  turn-findpass f-16是自己加的用来修饰的

js:

$( 'input[type="checkbox"]' ).iCheck({

                     checkboxClass : 'chd-sq-green' ,

                     increaseArea : '20%'

                 });

宝宝以前也很蠢的

希望大家以后记这个几句话一定要写在

$(function(){

})里面

关键的css:

.chd-sq-green, .icheckbox_square-green  {

1. display: inline-block;
2. vertical-align: middle;
3. margin: 0;
4. padding: 0;
5. width: 22px;
6. height: 22px;
7. background: url(../img/common/green.png) no-repeat;
8. border: none;
9. cursor: pointer;
10. margin-right: 10px;
11. /* border: 1px solid #ccc; */

}

.chd-sq-green.checked, .icheckbox_square-green.checked  {

1. background-position: -48px 0;
2. border: 1px solid rgba(255,255,255,.5);

}

有空的话我可以做个例子，然后可以下载，现在暂时没得，呵呵呵