前言
2017-百度前端技術學院編碼任務：自定義checkbox， radio樣式
任務目的
- 深入了解html label標簽
- 了解CSS邊框、背景、偽元素、偽類（注意和偽元素區分）等屬性的設置
- 了解CSS中常見的雪碧圖，并能自己制作使用雪碧圖
任務描述
- 參考 樣例點擊查看，實現頁面開發，要求實現效果基本一致
注意：
嘗試背景圖和偽元素兩種不同方式實現，對比兩種方式各自的優缺點。
注意測試不同情況，尤其是極端情況下的效果。
實現
整體解決思路：隱藏表單默認樣式，偽類或背景圖片來自定義樣式，通過偽類:checked來改變選擇狀態并且切換樣式。
label
<label>它通常關聯一個控件，或者是將控件放置在label元素內，或者是用作其屬性。
產生關聯可以和控件產生聯系，例如：點擊標簽label元素可以改變<input type="radio">的 :checked 狀態，或者獲得<input type="text" id="User" name="Name" />的焦點狀態。
之前思考過隱藏input后，為什么要用label元素來偽裝表單呢？原因是其他元素無法和input產生關聯，點擊其他元素是無法改變表單的checked 狀態，而點擊label是可以的。
示例
/*放在標簽元素內產生關聯*/
<label>Click me <input type="text" id="User" name="Name" /></label>
/*通過設置for屬性產生關聯*/
<label for="User">Click me</label>
<input type="text" id="User" name="Name" />
偽類和偽元素的區別
其實關于這部分自己之前做過一次總結。結論就是，偽類和偽元素都是給元素添加效果，不同的是偽類是相當于添加一個類class，偽元素相當于添加一個元素element。
另外:checked CSS 偽類選擇器表示任何處于選中狀態的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用戶通過點擊元素或選擇其他的值，可以改變該元素的 :checked 狀態，并:checked屬性賦給一個新的對象(例如其他的option值)。
input[type="radio"]:checked
表示頁面上的所有選中的radio按鈕input[type="checkbox"]:checked
表示頁面上的所有選中的checkbox按鈕option:checked
表示頁面上的所有選中的select的選項
偽類和背景圖片實現
偽類
點擊label或者input改變input的checked狀態，同時改變樣式和添加偽元素來達到模擬表單效果。
.input-disguise__radio > input:checked + label::after,
.input-disguise2__radio > input:checked::after{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
content: '';
text-align: center;
width: 6px;
height: 6px;
border-radius: 50%;
background: #d81e06;
}
.input-disguise__checkbox > input:checked + label::after,
.input-disguise2__checkbox > input:checked::after{
position: absolute;
top:-2px;
left: 1px;
content: '\2714';
text-align: center;
color: #d81e06;
font-size: 12px;
}
背景圖片（雪碧圖）
之前設置label元素模擬表單樣式，這次通過背景圖片來達到效果。
然后通過background-position來定位背景圖片位置.雪碧圖的使用就是為了減少圖片請求。
.input-sprite__radio > label,.input-sprite__checkbox > label{
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #d9d9d9;
border-radius: 2px;
background: url(img/input-sprite.png) 12px 0 no-repeat;
background-size: 200% 100%;
}
.input-sprite__radio > input[type=radio]:checked + label{
background-position: 0 0;
width: 14px;
height: 14px;
border: none;
}
.input-sprite__checkbox > input[type=checkbox]:checked + label{
background-position: 100% 0;
width: 14px;
height: 14px;
border: none;
}
- 關于偽元素和雪碧圖的優缺點：
雪碧圖優點是減少代碼量，簡單有效；缺點是無法精準定位，沒有偽元素準確，修改麻煩。
偽元素優點是圖片請求減少，定位準確，方便修改；缺點代碼量多，實現較復雜的效果比較麻煩。
參考鏈接
