使用CSS實(shí)現(xiàn)頁(yè)面復(fù)選框的方法
我要評(píng)論產(chǎn)品篇
在我們的后臺(tái)中，需要設(shè)置廣告精準(zhǔn)投放的區(qū)域，也就是要在全國(guó)31個(gè)省、自治區(qū)、直轄市中選擇。那么，出現(xiàn)下面這幅景象也就理所應(yīng)當(dāng)了：
這樣做有幾個(gè)問(wèn)題：
選項(xiàng)很多，沒(méi)有規(guī)律，找起來(lái)很累
如果是一個(gè)已經(jīng)選擇了部分選項(xiàng)的廣告，修改時(shí)仍然需要用肉眼尋找，無(wú)法一眼看出來(lái)投放到哪些省份
選完一個(gè)，再選下一個(gè)，還要從頭找，甚至?xí)灰呀?jīng)選過(guò)的影響
于是我想，首先應(yīng)該把所有選項(xiàng)分為“已選中”和“未選中”兩批，解決第2個(gè)問(wèn)題，減輕第3個(gè)問(wèn)題；其次復(fù)選框本身的價(jià)值不大，可以被替換為其它樣式；唯一可能引入的問(wèn)題，就是點(diǎn)選時(shí)，用戶的預(yù)期是看到復(fù)選框里出現(xiàn)一個(gè)小對(duì)勾，表示選中，如果我把它移開(kāi)放到“已選中”組里，用戶可能會(huì)迷惑，需要一些時(shí)間學(xué)習(xí)。
于是我跟某產(chǎn)品經(jīng)理朋友聊了聊這個(gè)想法，他表示確實(shí)可能造成用戶迷惑，不過(guò)如果能加入動(dòng)畫(huà)效果，那么基本沒(méi)問(wèn)題。嗯，開(kāi)始動(dòng)手。
技術(shù)實(shí)現(xiàn)篇
近日f(shuō)lexbox規(guī)范定案，各瀏覽器相繼支持display:flex;，同時(shí)傳來(lái)一條好消息，新實(shí)現(xiàn)比老實(shí)現(xiàn)display:box;快很多。這次我打算用flexbox來(lái)解決問(wèn)題，因?yàn)槔锩嬗幸粋€(gè)很重要的屬性：order（之前叫box-ordinal-group），它可以改變布局中元素的排列順序，配合CSS3新增的選擇器，應(yīng)該可以滿足需要。
第一步 分拆選中/未選中
（關(guān)于flexbox的知識(shí)，可以通過(guò)Google了解，雖然搜到的多是上一個(gè)版本，不過(guò)和最終版差別不大，只是叫法不同。本文不再過(guò)多講解，我就當(dāng)大家都會(huì)了）
<input type="checkbox">本身的樣式不能修改，所以我們必須借助的幫助；實(shí)現(xiàn)選中/未選中區(qū)分，那自然就要用到偽類:checked；選擇器一定是從外到內(nèi)、從前到后的，沒(méi)法選擇父級(jí)元素，所以不能用<label>去包<input>，那么最終布局就只能是：
- <div>
- <input type="checkbox" name="q[]" id="q1" />
- <label for="q1">小寶3225</label>
- <input type="checkbox" name="q[]" id="q2" />
- <label for="q2">王老白白白</label>
- <input type="checkbox" name="q[]" id="q3" />
- <label for="q3">空夫31</label>
- <input type="checkbox" name="q[]" id="q4" />
- <label for="q4">谷大白話</label>
- <input type="checkbox" name="q[]" id="q5" />
- <label for="q5">Meathill</label>
- <input type="checkbox" name="q[]" id="q6" />
- <label for="q6">一毛不拔大師</label>
- </div>
很簡(jiǎn)單哈，不解釋了。CSS3新增了“下一節(jié)點(diǎn)”選擇器 +，用來(lái)選擇某節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)，結(jié)合:checked偽類就可以將選中的<input>和它臨近的<label>通過(guò)改變order屬性移到前面去：
- #container {
- display:flex;
- flex-direction:row;
- flex-wrap:wrap;
- }
- #container input,
- #container label {
- order: 2; //所有選項(xiàng)、label順序?yàn)?
- }
- input[type=checkbox]:checked,
- input[type=checkbox]:checked + label {
- order: 0; // 越小越靠前
- }
不過(guò)這樣只是把選中的內(nèi)容提前，視覺(jué)上沒(méi)有真正的分割。所以我決定再加入一根分割線，上面是選中的，下面是未選的。這個(gè)時(shí)候我們需要用到 ~ 這個(gè)選擇器，選擇某節(jié)點(diǎn)后面的節(jié)點(diǎn)：
- hr {
- display:none; // 默認(rèn)情況下，沒(méi)選任何選項(xiàng)，分割線隱藏
- order: 1; // 分割線順序?yàn)?
- width:100%; // 保證獨(dú)霸一行
- }
- input[type=checkbox]:checked ~ hr {
- display:block; // 有選項(xiàng)被選中后才會(huì)顯示分割線
- }
http://jsfiddle.net/meathill/fPN3p/5/embedded/result/
這樣基礎(chǔ)功能實(shí)現(xiàn)了。不過(guò)視覺(jué)上，排版仍然不整齊，選中的選項(xiàng)和未選中的選項(xiàng)區(qū)分不算太明顯，所以下一步我準(zhǔn)備美化下checkbox。
第二步，美化CHECKBOX
做法與前面類似，也要用到CSS3新增的選擇器。前面為了實(shí)現(xiàn)<label>提前，沒(méi)有用它包裹<input>，所以在選項(xiàng)很多很長(zhǎng)導(dǎo)致?lián)Q行的時(shí)候，可能出現(xiàn)復(fù)選框和標(biāo)簽脫離的尷尬狀況。好在復(fù)選框的價(jià)值可以用別的樣式取代，所以先把小方框隱藏起來(lái)，轉(zhuǎn)而將<label>作為操作目標(biāo)，再來(lái)點(diǎn)邊框底色圓角（參考自Bootstrap 3），就可以了：
- input[type=checkbox] {
- display: none;
- }
- label {
- min-width: 120px;
- border: 1px solid #CCC;
- padding: 2px 8px;
- text-align: center;
- margin: 0 5px 5px 0;
- background: #FFF;
- color: #333;
- border-radius: 3px;
- box-sizing: border-box;
- }
- label:hover {
- border-color: #ADADAD;
- background: #EBEBEB;
- cursor: pointer;
- }
- input[type=checkbox]:checked + label {
- order: 0;
- background-color: #5cb85c;
- border-color: #4cae4c;
- color: #FFF;
- }
- input[type=checkbox]:checked + label:hover {
- background-color: #47a447;
- border-color: #398439;
- }
這樣看起來(lái)還有上升空間，如果加上幾個(gè)圖標(biāo)響應(yīng)用戶操作，那么學(xué)習(xí)成本會(huì)更低，對(duì)操作后的預(yù)期也會(huì)更準(zhǔn)確。于是引用CDN上的font-awesome，使用:before偽類加上小圖標(biāo)，就得到了最終效果
。
http://jsfiddle.net/meathill/fPN3p/4/embedded/result/
我無(wú)意中發(fā)現(xiàn)，這樣批量添加刪除時(shí)，鼠標(biāo)可以常點(diǎn)不動(dòng)，應(yīng)該也是個(gè)意外的收獲吧。
第三步，加入動(dòng)畫(huà)教育用戶（失?。?/strong>
至此功能基本做好了，不過(guò)由于修改了行為，可能導(dǎo)致用戶迷惑，所以準(zhǔn)備加個(gè)動(dòng)畫(huà)幫助用戶理解這個(gè)交互。
可惜作為一個(gè)新功能，瀏覽器的支持尚不完善，雖然規(guī)范中規(guī)定“animatable: yes”，但是實(shí)測(cè)在Chrome v.30下也無(wú)法工作：
http://jsfiddle.net/meathill/Ka66W/1/
看來(lái)只有等新版瀏覽器發(fā)布后再去完善了。
兼容性
使用純CSS做組件，幾乎不用擔(dān)心兼容性問(wèn)題，因?yàn)闉g覽器本身就做了很好的向下兼容，代碼最多不生效，一般不會(huì)錯(cuò)。
具體到這個(gè)組件，因?yàn)橹会槍?duì)視覺(jué)效果，沒(méi)有增刪改任何瀏覽器行為，所以兼容性也沒(méi)有任何問(wèn)題。不過(guò)最終效果呢，只有支持flexbox和CSS3選擇符的瀏覽器才能正常渲染。
我的環(huán)境是Window 8 + Chrome v.30，以及小米2 + Chrome v.30，測(cè)試通過(guò)。
后記
如今CSS很強(qiáng)，純CSS可以實(shí)現(xiàn)很多功能，希望今后能做出更多有價(jià)值的東西。分享這個(gè)組件的實(shí)現(xiàn)，希望對(duì)大家有用。
相關(guān)文章
HTML+CSS實(shí)現(xiàn)單選框、復(fù)選框美觀的樣式
這篇文章主要介紹了HTML+CSS實(shí)現(xiàn)單選框、復(fù)選框美觀的樣式,需要的朋友可以參考下2017-06-26利用CSS3實(shí)現(xiàn)單選框動(dòng)畫(huà)特效示例代碼
這篇文章給大家分享了一個(gè)利用CSS3實(shí)現(xiàn)單選框動(dòng)畫(huà)特效，效果非常的好，有興趣的下面來(lái)一起看看吧。2016-09-26純css3實(shí)現(xiàn)效果超級(jí)炫的checkbox復(fù)選框和radio單選框
天要為大家分享的是純css3實(shí)現(xiàn)的checkbox復(fù)選框和radio單選框，效果超級(jí)炫，這個(gè)實(shí)例完全由css3實(shí)現(xiàn)的沒(méi)有任何js代碼2014-09-01CSS3實(shí)例分享--超炫checkbox復(fù)選框和radio單選框
這篇文章主要介紹了CSS3實(shí)例分享--超炫checkbox復(fù)選框和radio單選框,需要的朋友可以參考下2014-09-01
CSS3實(shí)現(xiàn)的表單單選框、復(fù)選框特效
純CSS3實(shí)現(xiàn)的表單特效，可以對(duì)單選框、復(fù)選框設(shè)置顯示特效、可用效果等等2012-10-29CSS3實(shí)現(xiàn)復(fù)選框動(dòng)畫(huà)特效示例代碼
這篇文章給大家分享了一個(gè)利用CSS3實(shí)現(xiàn)復(fù)選框的動(dòng)畫(huà)特效，實(shí)現(xiàn)后的效果非常不錯(cuò)，有興趣的下面來(lái)一起看看吧。2016-09-27- 這篇文章主要為大家分享一款CSS自定義綠色復(fù)選框按鈕樣式，2016-03-04
純CSS實(shí)現(xiàn)自定義單選框和復(fù)選框功能
這篇文章主要介紹了純CSS實(shí)現(xiàn)自定義單選框和復(fù)選框功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-16
