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

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

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

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

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

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

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

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

html:

<divclass="checkbox f-fff">

                                <labelclass="f-16"><inputtype="checkbox"checked="checked">记住密码</label>

                                <aclass="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);

}

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