用純 CSS 樣式化 checkbox(複選方格)

HTML 的 checkbox 是不能夠直接用 css 去樣式化的，不過我們可以用些小技巧來替 checkbox 做點不同的樣式，畢竟這也算是滿常遇到的需求。

首先準備這樣的 html。

<label>
        <input type="checkbox" value="confirm" />
        <span>Confirm</span>
</label>

用 label 包起來的目的是讓我們可以點 label 就可以控制裡面的 checkbox，接著我們隱藏一下原本的 checkbox。

input[type=checkbox] {
            display: none;
}

接著原理就是利用自訂的背景，再搭配 :checked 選擇器來控制在不同狀態下要顯示的圖片就好。

input[type="checkbox"]+span {
  display: inline-block;
  padding-left: 26px;
  line-height: 20px;
  background: url(https://i.imgur.com/bZM5Itd.png) no-repeat left top;
            user-select: none;
}
input[type="checkbox"]:checked+span {
  background: url(https://i.imgur.com/JWm4WKA.png) no-repeat left top;
}

完整程式碼：