css重写复选框选中样式

html

<div id="app" class="app">
        <div class="msg">
            <div class="input-icon">
                <input type="checkbox" id="t2" value="1" class="check" >
                <label for="t2">在线</label>
            </div>
            <div class="input-icon">
                <input type="checkbox" id="t1" value="1" class="check" >
                <label for="t1">离线</label>
            </div>
        </div>
    </div>

css

  .app{
           margin: 20px;
       }
       .msg .input-icon{
           position: relative;
           display: inline-block;
       }
        .msg .input-icon input[type=checkbox]{
            visibility: hidden;
            /*position: relative;*/
            margin-right: 10px;
            vertical-align: middle;
        }
       .msg .input-icon .check{
           cursor: pointer;
           color: #fff;
           font-size: 14px;
           line-height: 16px;
           font-family: helvetica,Microsoft YaHei;
           word-break: break-word;
           padding-left: 8px;
       }
       /*定义文本框*/
       .msg .input-icon .check  + label::before{
           position: absolute;
           visibility: visible;
           left: 0;
           top: 2px;
           display: inline-block;
           content: '';
           cursor: pointer;
           width:16px;
           height:16px;
           border:1px solid rgba(206,212,218,1);
           opacity:1;
           border-radius:2px;
       }
       /*选中样式*/
       .msg .input-icon .check:checked + label::after{
           position: absolute;
           visibility: visible;
           left: 2px;
           top: 0px;
           display: inline-block;
           content: "\2714";
           text-align: center;
           font-size: 15px;
           color: #fff;
           transform: rotate(15deg);
       }
       /*选中颜色*/
       .msg .input-icon .check:checked + label::before{
           background: #15B68C;
           border:1px solid #15B68C;
       }

效果：