<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);
}