使用CSS修改radio样式

前言

文中使用两种方式修改默认的radio和checkbox图标。
1.伪元素方法
2.字体图标方法

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

方法二：使用字体图标

用到再记录吧。。。