<div class="weui-input-group">
             		<label class="check-item">
             			<input type="checkbox" checked=""> 出国
             		</label>
             		<label class="check-item">
             			<input type="checkbox"> 考研
             		</label>
             		<label class="check-item">
             			<input type="checkbox"> 爱好
             		</label>
             	</div>

.check-item,.radio-item{
	display: block;
	float: left;
	line-height: 22px;
	padding: 5px 0;
	box-sizing: border-box;
	padding-left: 24px;
	position: relative;
	font-size: 15px;
	color: #666666;
}
.check-item{
	width: 33.33%;
}
.radio-item{
	width: 50%;
}
.check-item input{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 18px;
	height: 18px;
	outline: none;
    border: 0;
    cursor: pointer;
    background-color: transparent;
    -webkit-appearance: none!important;
    outline: 0!important;
}
.check-item input[type="checkbox"]::before{
    display: block;
    width: 18px;
	height: 18px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    content: " ";
    text-decoration: none;
    border-radius: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url(../images/ls/checkbox.png);
}
.check-item input[type=checkbox]:checked:before {
    background-image: url(../images/ls/checkboxed.png);
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注