修改原生複選框checkbox樣式

原生：

<input type='checkbox' />

效果：

與ui設計師規劃的不一樣，要的效果如下：

代碼如下：
（1）html代碼：

<input type='checkbox' class ='colCheck' />

（2）樣式

input[type="checkbox"].colCheck{
-webkit-appearance: none;   /*改變瀏覽器默認風格,不寫此句自己寫的style不生效*/
background: #373E59;  /*設置複選框背景色*/
 border:1px #909DBF solid;  /*設置邊框*/
width: 20px;
height: 20px;   

}

input[type="checkbox"].colCheck:checked {  /*選中時複選框樣式*/
 background: #0084FF;
 color: white;
}

/*不寫下面代碼勾勾會不見了，原因：瀏覽器默認風格已經被設置為none，原先的勾勾自然也消失啦，要手動添加勾勾*/
input[type="checkbox"].colCheck:checked:after{  /*選中時複選框勾勾樣式*/
 content:'✔';
 margin-left:3px;

}