懒人写样式之修改多选框样式

  input[type=checkbox],input[type=radio]{
        -webkit-appearance: none;
        appearance: none;
        width: 27px;
        height: 27px;
        margin: 0;
        cursor: pointer;
        vertical-align: bottom;
        background: #fff;
        border: 1px solid #1c9bdd;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        }

        input[type=checkbox]:active,input[type=radio]:active {
                border-color: #1c9bdd;
                background: #ebebeb;
        }       
                
        input[type=checkbox]:hover {
                border-color: #c6c6c6;
                -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
                -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
                box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
        }

        input[type=checkbox]:checked,input[type=radio]:checked {
                background: #fff;
        }

        input[type=checkbox]:checked::after {
                content: url(cb.png);
                display: block;
                position: absolute;
                top: -5px;
                right: 0px;
                left: -5px
        }

        input[type=checkbox]:focus {
                outline: none;
                border-color: #1c9bdd;
        }

效果图

自行更改颜色和选中状态。