css----实现checkbox图片切换
生活随笔
收集整理的這篇文章主要介紹了
css----实现checkbox图片切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、效果圖
?
?
?
?
?
2、代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>checkbox</title><style type="text/css">label {width: 20px;font-size: 12px;cursor: pointer;}label i {display: inline-block;width: 18px;height: 16px;background-image: url("/imgs/tick-before.png");background-repeat: no-repeat;background-size: 18px 16px;}input[type="checkbox"],input[type="radio"] {display: none;}input[type="radio"]+i {border-radius: 7px;}input[type="checkbox"]:checked+i,input[type="radio"]:checked+i {background-image: url("/imgs/tick-after.png");}input {display: inline-block;width: 18px;height: 16px;background-image: url("/imgs/tick-before.png");background-size: 18px 16px;}</style> </head><body><label><input type="checkbox" name="check-protocol" checked><i></i></label><span>我已閱讀并完全接受服務協議</span> </body> </html>
?3、總結
這里實現的核心是input[type='checkbox']:checked{}這屬性，當checkbox被選中時的樣式。（CSS3的UI選擇器）
?
轉載于:https://www.cnblogs.com/SunlikeLWL/p/7596685.html
總結
以上是生活随笔為你收集整理的css----实现checkbox图片切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到小象是什么意思
- 下一篇： 【无删减】Python老司机收藏夹的17