bootstrap icheck radio单选框和checkbox复选框的大小可以调整吗?

本文主要分享如何通过css调整icheck表单美化插件模拟的单选框或复选框的大小

icheck

打开icheck的css样式表(根据自己选择的icheck皮肤),搜索找到"icheckbox_square-blue"和"iradio_square-blue",更改其width和height的值(默认22*22的尺寸)。

同时,记得修改对应icheck css皮肤的png图片的尺寸大小(图片通过css sprite定位)。

icheck radio和checkbox的尺寸调整
icheck radio和checkbox的尺寸调整

 利用iCheck添加自定义样式的图标

  1. $('input').iCheck({  
  2.   labelHover : false,  
  3.   cursor : true,  
  4.   checkboxClass : 'icheckbox_square-blue',  
  5.   radioClass : 'iradio_square-blue',  
  6.   increaseArea : '20%'  
  7. });  

如果是复选框,那么修改checkboxClass的属性值;如果是单选框,那么修改radioClass的属性值;

自定义iCheck表单效果

iCheck制作的美美的表单效果.png
iCheck制作的美美的表单效果.png

 

 

相关经验

导读书签
书签初始化中…