使用CSS修改HTML的checkbox效果的小示例分享
我要評論使用checkbox控制其后的元素
checkbox控件可以根據(jù)鼠標(biāo)的點(diǎn)擊來切換其狀態(tài)，而且CSS中可以使用:checked偽類來針對選中狀態(tài)的checkbox設(shè)置樣式。再配合上CSS中的“+”或“～”選擇器，就可以從checkbox的操作來控制它之后的元素了。甚至再配合上LABEL標(biāo)簽可以實(shí)現(xiàn)更多效果。
運(yùn)行
- <!DOCTYPE html>
- <style>
- [type=checkbox]+* {display:none;}
- [type=checkbox]:checked+* {display:inline-block;}
- </style>
- <input type="checkbox" /><input />
這個(gè)例子中，文本框默認(rèn)是隱藏的，只有當(dāng)勾選checkbox時(shí)，其后的文本框才會(huì)顯示。這樣就可以實(shí)現(xiàn)無JavaScript的切換效果了。
也許有人會(huì)覺得放個(gè)checkbox在頁面上太礙眼了。其實(shí)，即使checkbox自身處于隱藏狀態(tài)，CSS中對:checked的判斷也依然生效。那么我們可以隱藏掉這個(gè)checkbox，讓LABEL標(biāo)簽為其設(shè)置響應(yīng)區(qū)域。
運(yùn)行
- <!DOCTYPE html>
- <style>
- body {font:14px/1.5 微軟雅黑;}
- [type=checkbox] {display:none;}
- [type=checkbox]~input {display:none;}
- [type=checkbox]:checked~input {display:inline-block;}
- [type=checkbox]~span {cursor:pointer;margin-right:10px;}
- [type=checkbox]~span:before {content:'點(diǎn)我顯示文本框';}
- [type=checkbox]~span:hover {color:#C30;}
- [type=checkbox]:checked~span:before {content:'點(diǎn)我隱藏文本框';}
- </style>
- <label><input type="checkbox" /><span></span><input /></label>
但這樣的做法還是有點(diǎn)局限性的，因?yàn)槟壳暗腃SS不支持:has、:parent之類的東西，所以支持的操作僅局限在LABEL中，而LABEL的默認(rèn)行為總是會(huì)影響其內(nèi)部第一個(gè)控件，上面的代碼即使彈出了文本框，在點(diǎn)擊文本框時(shí)候同樣有可能觸發(fā)LABEL的默認(rèn)動(dòng)作，導(dǎo)致文本框隱藏。
總之，這里只是提供了這樣的方法，至于要用在何處要怎么用就靠大家自己研究了。
相關(guān)文章
使用CSS3和Checkbox實(shí)現(xiàn)JQuery的一些效果
這篇文章主要介紹了使用CSS3和Checkbox實(shí)現(xiàn)JQuery的一些效果,包括show()/hide()和fadeIn()/fadeOut()以及slideUp()/slideDown()的實(shí)現(xiàn),需要的朋友可以參考下2015-08-03
9款樣式迷人的CSS3自定義Checkbox復(fù)選框特效源碼
天我們來分享一款9款樣式迷人的CSS3漂亮的自定義Checkbox復(fù)選框。這幾款復(fù)選框樣式很豐富，使用起來也比較方便2014-11-07一款純css3實(shí)現(xiàn)簡單的checkbox復(fù)選框和radio單選框
這篇文章主要為大家介紹了利用純css3實(shí)現(xiàn)一款簡單實(shí)用的checkbox復(fù)選框和radio單選框，代碼簡單易懂，可以直接復(fù)制，感興趣的可以進(jìn)來看看哦2014-11-05
