CSS修改radio的样式（对勾效果和圆形效果）

在实际开发中经常会遇到修改radio按钮的样式，所以在这里记录一下，方便以后使用！！！

使用伪元素方法方式修改默认的radio和checkbox图标。

Radio

效果图：

 

 

 

 

 

 具有代码如下：

可以按照具体需求进行修改

<input class="radio_type" type="radio" name="type" id="radio1" checked="checked"/> 
<label for="radio1">radio1</label>
<input class="radio_type" type="radio" name="type" id="radio2" /> 
<label for="radio2">radio2</label>

label{
    line-height: 20px;
    display: inline-block;
    margin-left: 5px;
    margin-right:15px;
    color: #777;
}
.radio_type{
    width: 20px;
    height: 20px;
    appearance: none;
    position: relative;
}
.radio_type:before{
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #7d7d7d;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:before{
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #c59c5a;
    background:#c59c5a;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:after{
    content: '';
    width: 10px;
    height:5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 6px;
    left:5px;
    vertical-align: middle;
    transform: rotate(-45deg);
}
.radio_type:checked+label{
    color: #c59c5a;
}

 

圆形款只需稍微修改一下css便好

 

 

 

label{
   line-height: 20px;
   display: inline-block;
   margin-left: 5px;
   margin-right:15px;
   color: #777;
}
.radio_type{
   width: 20px;
   height:20px;
   appearance: none;
   position: relative;
}
.radio_type:before{
   content: '';
   width: 20px;
   height: 20px;
   border: 2px solid #EDD19D;//可以再这里更改按钮边框的颜色
   display: inline-block;
   border-radius: 50%;
   vertical-align: middle;
}
.radio_type:checked:before{
   content: '';
   width: 20px;
   height: 20px;
   border: 2px solid #EDD19D;//可以在这里颜色
   display: inline-block;
   border-radius: 50%;
   vertical-align: middle;
}
.radio_type:checked:after{
   content: '';
   width: 12px;
   height: 12px;
   text-align: center;
   background:#EDD19D;//可以在这里更改颜色
   border-radius: 50%;
   display: block;
   position: absolute;
   top: 6px;
   left: 6px;
}
.radio_type:checked+label{
   color: #EDD19D;
}