前言
2017-百度前端技術(shù)學(xué)院編碼任務(wù)：自定義checkbox， radio樣式
任務(wù)目的
- 深入了解html label標(biāo)簽
- 了解CSS邊框、背景、偽元素、偽類（注意和偽元素區(qū)分）等屬性的設(shè)置
- 了解CSS中常見的雪碧圖，并能自己制作使用雪碧圖
任務(wù)描述
- 參考 樣例點擊查看，實現(xiàn)頁面開發(fā)，要求實現(xiàn)效果基本一致
注意：
嘗試背景圖和偽元素兩種不同方式實現(xiàn)，對比兩種方式各自的優(yōu)缺點。
注意測試不同情況，尤其是極端情況下的效果。
實現(xiàn)
整體解決思路：隱藏表單默認樣式，偽類或背景圖片來自定義樣式，通過偽類:checked來改變選擇狀態(tài)并且切換樣式。
label
<label>它通常關(guān)聯(lián)一個控件，或者是將控件放置在label元素內(nèi)，或者是用作其屬性。
產(chǎn)生關(guān)聯(lián)可以和控件產(chǎn)生聯(lián)系，例如：點擊標(biāo)簽label元素可以改變<input type="radio">的 :checked 狀態(tài)，或者獲得<input type="text" id="User" name="Name" />的焦點狀態(tài)。
之前思考過隱藏input后，為什么要用label元素來偽裝表單呢？原因是其他元素?zé)o法和input產(chǎn)生關(guān)聯(lián)，點擊其他元素是無法改變表單的checked 狀態(tài)，而點擊label是可以的。
示例
/*放在標(biāo)簽元素內(nèi)產(chǎn)生關(guān)聯(lián)*/
<label>Click me <input type="text" id="User" name="Name" /></label>
/*通過設(shè)置for屬性產(chǎn)生關(guān)聯(lián)*/
<label for="User">Click me</label>
<input type="text" id="User" name="Name" />
偽類和偽元素的區(qū)別
其實關(guān)于這部分自己之前做過一次總結(jié)。結(jié)論就是，偽類和偽元素都是給元素添加效果，不同的是偽類是相當(dāng)于添加一個類class，偽元素相當(dāng)于添加一個元素element。
另外:checked CSS 偽類選擇器表示任何處于選中狀態(tài)的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用戶通過點擊元素或選擇其他的值，可以改變該元素的 :checked 狀態(tài)，并:checked屬性賦給一個新的對象(例如其他的option值)。
input[type="radio"]:checked
表示頁面上的所有選中的radio按鈕input[type="checkbox"]:checked
表示頁面上的所有選中的checkbox按鈕option:checked
表示頁面上的所有選中的select的選項
偽類和背景圖片實現(xiàn)
偽類
點擊label或者input改變input的checked狀態(tài)，同時改變樣式和添加偽元素來達到模擬表單效果。
.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;
}
背景圖片（雪碧圖）
之前設(shè)置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;
}
- 關(guān)于偽元素和雪碧圖的優(yōu)缺點：
雪碧圖優(yōu)點是減少代碼量，簡單有效；缺點是無法精準(zhǔn)定位，沒有偽元素準(zhǔn)確，修改麻煩。
偽元素優(yōu)點是圖片請求減少，定位準(zhǔn)確，方便修改；缺點代碼量多，實現(xiàn)較復(fù)雜的效果比較麻煩。
參考鏈接
