怎么使用icheck美化CheckBox多选框

何处锦绣不灰堆

发布于 2020-05-29 11:53:04

8190

发布于 2020-05-29 11:53:04

一直写checkbox觉得很丑（简称CB），毕竟自带的CB是很丑的，没有做任何的美化的，于是觉得不甘，找了很久找到了一个插件，是可以美化CB的，好东西就要大家分享，所以今天简单的写一个使用教程：

html

<body>
				<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>vue</label> 
				<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>boostrap</label>
				<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C</label>
			    <input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C++</label> 
			    <input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C#</label>
				<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>PHP</label>
	</body>

我们简单的画几个CB，不加任何的样式的时候是这样的：

然后我们添加几个样式（引入css和js的话，这段是不需要的，这个是其中一个小的样式）

input{
				display: inline-block;
			    vertical-align: middle;
			    margin: 0;
			    padding: 0;
			    width: 20px;
			    height: 20px;
			    background: url(../css/polaris/polaris.png) no-repeat;
			    border: none;
			    cursor: pointer;
			}
			label{
				font-family:"agency fb";
				font-size: larger;
			}

引入js和css

                <link href="../css/layui/css/layui.css" rel="stylesheet"/>
		<link href="../css/polaris/polaris.css" rel="stylesheet" />
		<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="../css/layui/lay/dest/layui.all.js" type="text/javascript"></script>
		<script src="../js/icheck.js"></script>

效果是这样的：