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