利用css的label的偽類（::before）代替checkbox和radio效果：
優點：需要圖片來調整選中前和選中後的樣式，純css搞定
缺點：相容性，IE8以下不支援
代碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css改變預設的radio和checkbox的樣式</title> <style> input[type="radio"], input[type='checkbox'] { display: none; } input[type='radio']+label::before, input[type='checkbox']+label::before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 6px; border-radius: 100%; vertical-align: middle; border: 1px solid #E4E4E4; background: #FFFFFF; background-image: url('https://i.loli.net/2018/07/20/5b517d0bf066a.png'); background-position: 0px 0px; } input[type='radio']:hover+label::before, input[type='checkbox']:hover+label::before { background-position: -15px 0px; } input[type='radio']:checked+label::before, input[type='checkbox']:checked+label::before { background-position: -15px -15px; } </style></head><body> <p>單選框</p> <input type="radio" name="sex" value="man" id="man" checked> <label for="man">男</label> <input type="radio" name="sex" value="female" id="female"> <label for="female">女</label> <p>多選框</p> <input type="checkbox" name="fruits" value="apple" id="apple" checked> <label for="apple">蘋果</label> <input type="checkbox" name="fruits" value="orange" id="orange"> <label for="orange">橙子</label></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
