使用CSS修改radio样式

1，第一种样式：

 <label> <input class="radio_type" type="radio"/>免费</label>
 <label> <input class="radio_type" type="radio" />积分</label>
 <label> <input class="radio_type" type="radio" />现金</label>

.radio_type {
    width: 20px;
    height: 20px;
    appearance: none;
    position: relative;
    outline: none;
}
.radio_type:before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #19874f;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #19874f;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}
.radio_type:checked:after {
    content: "";
    width: 9px;
    height: 9px;
    text-align: center;
    background: #19874f;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
}
.radio_type:checked + label {
    color: #edd19d;
}

第二种样式：

<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;
}

参考：https://www.jianshu.com/p/e1dac58adb2c

原文地址：https://www.cnblogs.com/lovebear123/p/12074682.html