Analog multi selection box label checkbox

With a label tag simulation checkbox selection box, put the key code is as follows :( need their own specific style adjustments)

· I have the effect of:

 Like several options box is set to change the name and the label name under calss input to the input box,

 

 

HTML代码：
   <div class="hander">
        <input type="checkbox" name="favorite" value="1" id="color-input-red" class="color-input-red"/>
        <label for="color-input-red"></label>
        <span>手袋</span>
    </div>


CSS代码：
#color-input-red +label{
    display: block;
    width:0.22rem;
    height:0.22rem;
    cursor: pointer;
    position: absolute;
    top: 0.09rem;
    left: 0;
    border: 1px solid #cccccc;
}
#color-input-red:checked +label::before{
    display: block;
    content: "\2714";
    text-align: center;
    font-size:0.16rem;
    line-height: 0.20rem;
    color: #000000;
}
//隐藏checkbox默认样式
input[type=checkbox]{
    visibility: hidden;
}