CSS人人都能寫自定義Checkbox（+1白話講解）

背景

那一刻...無數前端開發者想起了自己曾經被Checkbox支配的恐懼...這種在絕大多數瀏覽器中幾乎或完全不能進行樣式替代的玩意讓開發者們被迫選擇預設樣式，或者是找一些訪問性極差的hack方案...

開始操作

• 先把基本結構搞出來

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>
複製程式碼

可能有部分人不知道label有啥用: 當label與checkbox關聯後，就可以起到觸發開關的作用，並且我們可以通過對其新增一些內容(下面會講解)來模擬checkbox的樣式，再把真正的checkbox隱藏，最終達到我們的目的

• 新增樣式

input[type="checkbox"] + label::before{
  content: '\a0'; /* 不換行空格 */
  display: inline-block; /* 讓元素和label處於同一行 */
  vertical-align: .1em; /* 設定元素向上偏移.1em */
  width: .8em;
  height: .8em;
  margin-right: .2em; /* 和label保持一定距離 */
  border-radius: .2em;  /* 加個圓角 */
  background-color: lightcoral;
  text-indent: .15em; /* 設定元素內content(下文模擬的✓)的縮排 */
  line-height: .65; /* 設定行高 */
}
複製程式碼

'+' 選擇器指相鄰同胞選擇器，例子中指選擇緊挨在checkbox後面的label~

對於content這個屬性，這裡有篇部落格大家可以看一下編碼

關於em這裡就不再講解啦~ 不過還是推薦大家出門拐拐拐去學習一下emmmmm.

• 展示

這個淡珊瑚色的框框就是我們設定的label::before

• 加個選中狀態

input[type="checkbox"]:checked + label::before{
  content: '\2713';
  background: lightblue;
}
複製程式碼

• 展示

  

這個對勾的位置受到了上面樣式text-indent: .15em的影響

這裡用到了CSS3的checked偽物件選擇器

• 隱藏預設的checkbox

input[type="checkbox"]{
  position: absolute;
  clip: rect(0,0,0,0); /* 剪裁絕對定位元素 */
}
複製程式碼

• 展示

注意, 這裡使用display:none雖然也能隱藏,但是會將checkbox從tab切換焦點的佇列中刪除(比如你輸入完賬號密碼後使用tab不會使checkbox獲得焦點)

結果

• Html

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>
複製程式碼

• Css

input[type="checkbox"] + label::before{
  content: '\a0';
  display: inline-block;
  vertical-align: .1em;
  width: .8em;
  height: .8em;
  margin-right: .2em;
  border-radius: .2em;
  background-color: lightcoral;
  text-indent: .15em;
  line-height: .65;
}
input[type="checkbox"]:checked + label::before{
  content: '\2713';
  background: lightblue;
}
input[type="checkbox"]{
  position: absolute;
  clip: rect(0,0,0,0);
}
複製程式碼

瞭解了基礎操作後，相信各位能自己獨立寫一個自定義checkbox啦，各位也可以自由修改content或者新增動畫做出酷炫的效果~