改变radio默认样式

改变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样式，如果有不理解的地方，可以百度下，我也是第一次接触，最后想要提高自己的水平，还是要多敲代码，多思考，多虚心请教。