CSS之自定義原生checkbox樣式

需求

原生的checkbox的樣式基本不能滿足項目的要求。在項目上，常常不使用原生的checkbox，而做個假的，通過點擊事件來判斷是否選中。

但往往，這並不是一個好的辦法。如何解決？可以通過僞類來自定義checkbox的樣式。

原生checkbox樣式：

自定義checkbox樣式：

實現

demo：https://jsfiddle.net/ken0qvj6/1/

<div>
  <input type="checkbox">
  <span>同意條款</span>
</div>

給checkbox添加一個僞類，這部分會覆蓋在原生的checkbox上，定義好未選中時的樣式。選中時，將content替換爲勾的字符，修改顏色和背景色自定義選中時的樣式。

input[type=checkbox] {
  position: relative;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
}
 
input[type=checkbox]:after {
  display: inline-block;
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #ddd;
}
 
input[type=checkbox]:checked:after {
  content: "✓";
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #7f7159;
  text-align: center;
 }