溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用CSS修改HTML的checkbox效果

發(fā)布時(shí)間：2021-08-04 18:06:49 來源：億速云 閱讀：122 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“如何使用CSS修改HTML的checkbox效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用CSS修改HTML的checkbox效果”吧！

使用checkbox控制其后的元素
　　checkbox控件可以根據(jù)鼠標(biāo)的點(diǎn)擊來切換其狀態(tài)，而且CSS中可以使用:checked偽類來針對(duì)選中狀態(tài)的checkbox設(shè)置樣式。再配合上CSS中的“+”或“～”選擇器，就可以從checkbox的操作來控制它之后的元素了。甚至再配合上LABEL標(biāo)簽可以實(shí)現(xiàn)更多效果。
運(yùn)行

CSS Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>   

  2. <style>   

  3. [type=checkbox]+* {display:none;}   

  4. [type=checkbox]:checked+* {display:inline-block;}   

  5. </style>   

  6. <input type="checkbox" /><input />  

　　這個(gè)例子中，文本框默認(rèn)是隱藏的，只有當(dāng)勾選checkbox時(shí)，其后的文本框才會(huì)顯示。這樣就可以實(shí)現(xiàn)無JavaScript的切換效果了。
　　也許有人會(huì)覺得放個(gè)checkbox在頁面上太礙眼了。其實(shí)，即使checkbox自身處于隱藏狀態(tài)，CSS中對(duì):checked的判斷也依然生效。那么我們可以隱藏掉這個(gè)checkbox，讓LABEL標(biāo)簽為其設(shè)置響應(yīng)區(qū)域。
運(yùn)行

CSS Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>   

  2. <style>   

  3. body {font:14px/1.5 微軟雅黑;}   

  4. [type=checkbox] {display:none;}   

  5. [type=checkbox]~input {display:none;}   

  6. [type=checkbox]:checked~input {display:inline-block;}   

  7. [type=checkbox]~span {cursor:pointer;margin-right:10px;}   

  8. [type=checkbox]~span:before {content:'點(diǎn)我顯示文本框';}   

  9. [type=checkbox]~span:hover {color:#C30;}   

  10. [type=checkbox]:checked~span:before {content:'點(diǎn)我隱藏文本框';}   

  11. </style>   

  12. <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)致文本框隱藏。

感謝各位的閱讀，以上就是“如何使用CSS修改HTML的checkbox效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何使用CSS修改HTML的checkbox效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手