【CSS】checkbox style

説明

自由撰寫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

Display

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *