更换checkbox的样式

通常情况下，各个浏览器对·<input type="checkbox">·的样式不一致，并且不那么美观。所以有时候设计需要我们更换原有的样式：

html：

            <span><input type="checkbox" class="input_check" id="check3" value="123"><label for="check1"></label></span>

css:

    span{
        position: relative;
      }
    .input_check {
        position: absolute;
        visibility: hidden;
        cursor:pointer;
    }
    .input_check+label {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid #677795;
    } 
    .input_check:checked+label:after {
        content: "";
        position: absolute;
        left: 2px;
        bottom: 12px;
        width: 9px;
        height: 4px; 
        border: 2px solid #677795;
        border-top-color: transparent;
        border-right-color: transparent;
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg); 
        transform: rotate(-45deg);
    }

其中必须注意，input的id必须和label的for一致，这是为了点击label联动点击了此checkbox。:after 实现的是对号的样式，方框旋转45度实现。

效果如下：

327ea443-cb56-48b6-a332-89b68b132f28.png