checkbox选中时如何改变默认样式

刚刚发布了人生中的第一篇博客，有点小兴奋，紧接着再来了一篇，希望不要出现太多问题。
好了，我的废话太多了，说点有料的东西
1.是关于checkbox的，checkbox在选中、未选中的时候是有默认样式的，但是我们是干前端的，要对页面有一定的审美，所以样式很重要，听着，是很重要，一般我们选中它时，会给它一个样式，如背景图片。
这时，就要给它在选中后，也就是checked的时候加样式，怎么加呢？
上代码。。。

/* 复选框 */
input[type="checkbox"] {
    -webkit-appearance: none; /*清除复选框默认样式*/
    border: 1px solid #627BF6;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    float: left;
    margin-top: 0;
    margin-right: 0 !important;
    border-radius: 0;
}
input[type="checkbox"]:checked {
    /* background-position: -48px 0; */
    background: #627BF6 url(../images/xz@2x.png) ; /*复选框的背景图*/
    background-size: contain;
}

上个选中后的效果，往下看


我这里的背景图片是36px*36px的，所以在设置w、h时都设的18px，其他的可根据自己具体情况修改！