纯CSS美化单复选框（checkbox、radio）
生活随笔
收集整理的這篇文章主要介紹了
纯CSS美化单复选框（checkbox、radio）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最重要的一點，隱藏選擇框本身。不多說了，上代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>選擇框樣式</title> <style> label {font-size:12px;cursor:pointer;} label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;} 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:#2489c5;} input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;} input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;} </style> </head> <body> <label><input type="checkbox"><i>?</i>復(fù)選框</label><br> <label><input type="checkbox" checked><i>?</i>復(fù)選框</label><br> <label><input type="checkbox" disabled><i>?</i>復(fù)選框禁用</label><br> <label><input type="checkbox" disabled checked><i>?</i>復(fù)選框禁用已選</label><br> <label><input type="radio" name="abc"><i>?</i>單選框</label><br> <label><input type="radio" name="abc" checked><i>?</i>單選框</label><br> <label><input type="radio" name="abc" disabled><i>?</i>單選框禁用</label><br> <label><input type="radio" name="def" disabled checked><i>?</i>單選框禁用已選</label><br> </body> </html>效果如下：
總結(jié)
以上是生活随笔為你收集整理的纯CSS美化单复选框（checkbox、radio）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python 中reload一个文件时报
- 下一篇： CSS实现的阴影效果