利用css的：label代替checkbox效果
優點：不需要圖片，純css搞定
缺點：兼容性，IE8以下不支持
直接上代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用css改變默認的checkbox樣式</title> </head> <body> <div><label><input type="checkbox"><b></b>選擇</label></div> <style> input[type="checkbox"]{display: none;} input[type="checkbox"]+b{ display: inline-block; width: 18px;height: 18px; border: 1px solid #ccc; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; vertical-align: middle; } input[type="checkbox"]:checked+b{ background: #f00;border-color: #f00; } </style> </body> </html>