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

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

image.png

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

方法二：使用字体图标

用到再记录吧。。。