关于input输入框checkbox类型的样式问题

　　之前开发的时候，拿到设计稿发现了知识的盲点，而且是小知识，设计稿长这样：

　　而默认的CheckBox框是这样的：

　　然后我直接设置 CheckBox的宽高、颜色，发现并没有那么简单，于是乎，换个角度解决问题，如下所示，我们在 html 中写入如下标签：　

        <div class="checkbox">
              <input type="checkbox" value="1" id="checkboxInput" name="" checked="checked" />
              <label for="checkboxInput"><i></i></label>
        </div>
　　　　 <span>点击试试</span>

　　然后在 css 样式中设置如下：

            .checkbox {
                width: 18px;
                position: relative;
                display: inline-block;
                vertical-align: middle;
            }            
            .checkbox label {
                cursor: pointer;
                position: absolute;
                width: 18px;
                height: 18px;
                top: 0;
                left: 0;
                background: #ccc;
                border-radius: 3px;
            }            
            .checkbox label i {
                content: '';
                position: absolute;
                width: 8px;
                height: 5px;
                background: transparent;
                top: 4px;
                left: 4px;
                border: 3px solid #fff;
                border-top: none;
                border-right: none;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
            .checkbox input[type=checkbox]+label i {
                border-color: #fff;
            }
            .checkbox input[type=checkbox]:checked+label i{
                opacity: 1;
                border-color: #fe5850;
            }

                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                              by：木梓李