萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 使用CSS修改HTML的checkbox效果的小示例分享
使用CSS修改HTML的checkbox效果的小示例分享
使用checkbox控制其後的元素
checkbox控件可以根據鼠標的點擊來切換其狀態，而且CSS中可以使用:checked偽類來針對選中狀態的checkbox設置樣式。再配合上CSS中的“+”或“～”選擇器，就可以從checkbox的操作來控制它之後的元素了。甚至再配合上LABEL標簽可以實現更多效果。
運行
CSS Code復制內容到剪貼板
- <!DOCTYPE html>
- <style>
- [type=checkbox]+* {display:none;}
- [type=checkbox]:checked+* {display:inline-block;}
- </style>
- <input type="checkbox" /><input />
這個例子中，文本框默認是隱藏的，只有當勾選checkbox時，其後的文本框才會顯示。這樣就可以實現無JavaScript的切換效果了。
也許有人會覺得放個checkbox在頁面上太礙眼了。其實，即使checkbox自身處於隱藏狀態，CSS中對:checked的判斷也依然生效。那麼我們可以隱藏掉這個checkbox，讓LABEL標簽為其設置響應區域。
運行
CSS Code復制內容到剪貼板
- <!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:'點我顯示文本框';}
- [type=checkbox]~span:hover {color:#C30;}
- [type=checkbox]:checked~span:before {content:'點我隱藏文本框';}
- </style>
- <label><input type="checkbox" /><span></span><input /></label>
但這樣的做法還是有點局限性的，因為目前的CSS不支持:has、:parent之類的東西，所以支持的操作僅局限在LABEL中，而LABEL的默認行為總是會影響其內部第一個控件，上面的代碼即使彈出了文本框，在點擊文本框時候同樣有可能觸發LABEL的默認動作，導致文本框隱藏。
總之，這裡只是提供了這樣的方法，至於要用在何處要怎麼用就靠大家自己研究了。
DivCSS教程排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved