説明

自由撰寫checkbox的樣式，但是保有 checked 的功能

【架構】

• <label>裡面要有 2 個東西：<input type=”checkbox”>、<div class=”checkbox-widget”>
  ※這樣點到label裡面任何一處，<input type=”checkbox”>都會被觸發
• checkbox-widget是假的checkbox，在〔.checkbox-widget〕做出勾選前的樣式
• 在〔input[type=”checkbox”]:checked+.checkbox-widget〕撰寫勾選後的樣式

參考：input label 應用
衍生：radio style

範例

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 1

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 2

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 3

.checkbox-label
 .checkbox-widget, input
  display: inline-block
  vertical-align: top
 
 
 //在這裡刻出自訂樣式的checkbox
 .checkbox-widget 
  width: 20px
  height: 20px
  margin-right: 5px
  background-color: #fff
  border: 1px solid #eee
  border-radius: 4px
  text-align: center
  &:after
   content: "✔︎"
   color: #fff
 
 //原本的checkbox設不顯示
 input[type="checkbox"]
  display: none

 //選取後的樣式
 input[type="checkbox"]:checked+.checkbox-widget          
  background-color: #50BBB6 
  border-color: #50BBB6