css checkbox 样式

 原生的不好看，换一个样式实现

html

<div className="date-checkbox">
         input type="checkbox" ref="MON" id="MON" value="MON" onChange={_this.selectDate.bind(_this)} />
         <label htmlFor="MON"></label>
         <span className="date">MON</span>
</div>

CSS部分

.booking-reservation .form-group .control-select .date-checkbox {
    display: inline-block;
    position: relative;
    /* margin: 0 auto; */
    /* vertical-align: middle; */
    width: 70px;
    overflow: hidden;
}

把原来的checkbox隐藏

input[type=checkbox] {
    visibility: hidden;
    position: relative;
    width: 17px;
    height: 17px;
}

checkbox用label实现，外边框

 .date-checkbox label {
    position: absolute;
    top: 7px;
    left: 0;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #ccc;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    cursor: pointer;
}

after这里做一个长方形，只有左和下边框，然后逆时针转动45度，变成对号，边框是白色

 .date-checkbox label:after {
    content: '';
    width: 9px;
    height: 5px;
    position: absolute;
    top: 2px;
    left: 2px;
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

check的时候变成红色的背景

 input[type=checkbox]:checked + label {
    background: #eb4b51;
    border-color: #eb4b51;
}

如下图所示：