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或者添加動畫作出酷炫的效果~