改变Bootstrap的iCheck的尺寸

最新推荐文章于 2022-05-23 17:23:41 发布

daelly

最新推荐文章于 2022-05-23 17:23:41 发布

阅读量2.4k

点赞数

文章标签： bootstrap iCheck

本文链接：https://blog.csdn.net/daelly/article/details/46562997

版权

<p><span style="font-family: Arial, Helvetica, sans-serif;">方法：</span></p><p>1、打开你使用的那个iCheck的css文件，改变里面的一些参数包括大小和各种状态下的背景图片的position；</p><p>2、修改对应的那个背景图片PNG的大小，用美图秀秀之类的软件按比例调整一下即可。</p><p>下面是CSS修改的例子：</p>

.icheckbox_flat,
.iradio_flat {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
   <span style="color:#ff0000;"> <strong>width: 30px;</strong></span>
    <span style="color:#ff0000;"><strong>height: 30px;</strong></span>
    background: url(flat.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_flat {
    background-position: 0 0;
}
    .icheckbox_flat.checked {
        <strong><span style="color:#ff0000;">background-position: -33px 0;
</span></strong>
    }
    .icheckbox_flat.disabled {
        <strong><span style="color:#ff0000;">background-position: -66px 0;</span></strong>
        cursor: default;
    }
    .icheckbox_flat.checked.disabled {
        <span style="color:#ff0000;"><strong>background-position: -99px 0;</strong></span>
    }

这里将原来20*20的的iCheck，改为了30*30大小；相应的状态的背景图片的位置也要改变