改變radio默認樣式，代碼如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>改變radio默認樣式</title> <style> dd { float:left; line-height:37px; } dd:nth-child(3n+1) { text-align:right; width:164px; } input[type="radio"]{ display:none; } input[type="radio"]+label{ position:relative; padding-left:30px; line-height:20px; color:#333; font-weight:normal; margin-left:2px; } label { display:inline-block; max-width:100%; margin-bottom:5px; font-weight:700; } input[type="radio"]+label::before { content:""; width:20px; height:20px; border-radius:20px; border:1px solid #cecece; position:absolute; left:0; } input[type="radio"]:checked+label::after { top:5px; left:5px; content:""; background-color:#58B094; width:12px; height:12px; border-radius:12px; position:absolute; vertical-align:middle; } </style> </head> <body> <dl> <dd>廣告類型：</dd> <dd> <input id="adType1" name="adType" type="radio" value="1"> <label for="adType1">開屏</label> <input id="adType2" name="adType" type="radio" value="2" checked="checked"> <label for="adType2">橫幅</label> <input id="adType3" name="adType" type="radio" value="3"> <label for="adType3">插屏</label> <input id="adType4" name="adType" type="radio" value="4"> <label for="adType4">信息流</label> <input id="adType5" name="adType" type="radio" value="5"> <label for="adType5">視頻</label> </dd> <dd></dd> </dl> </body> </html>
總結：
1、type="radio"的 id 和 label 的 for 屬性值必須保持一致；
2、type="radio"的 name 屬性值必須保持一致；
3、要改變 type="radio" 的默認樣式，務必要設置如下：
input[type="radio"]{
display:none;
}
后再寫自己想要的樣式。
上面的樣式很多是 CSS3樣式，如果有不理解的地方，可以百度下，我也是第一次接觸，最后想要提高自己的水平，還是要多敲代碼，多思考，多虛心請教。