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