修改radio单选按钮的“圆点”选中颜色

 

1、css样式

/* 单选换颜色 */
.radio {
    position: relative;
    display: inline-block;
    font-weight: 400;
}

    .radio input {
        position: absolute;
        left: -9999px;
        background-color: #ffffff;
    }

    .radio i {
        display: block;
        position: absolute;
        top: 2px;
        left: 2px;
        width: 13px;
        height: 13px;
        outline: 0;
        border: 1px solid #ffffff;
        background: transparent;
        border-radius: 50%;
        transition: border-color .3s;
        -webkit-transition: border-color .3s;
        background-color: #ffffff;
    }

    .radio input + i:after {
        position: absolute;
        content: '';
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background-color: #00ff90;
        opacity: 0;
        transition: opacity .1s;
        -webkit-transition: opacity .1s;
    }

    .radio input:checked + i:after {
        opacity: 1;
    }

 

2、前端代码

 <div id="decryptedRadio" style="width:210px; display:inline; margin-bottom: 0; vertical-align: middle; float: right; margin-top: 11px;"  ms-click="@loadList"  ms-if="is_proxy">
                    <label   class="radio"   style="margin: 0px 0px;width:70px;" ><input  type="radio" name="decryptedRadio" value="1"><i></i><span style="margin-left: 20px;">林动</span></label>
                    <label   class="radio"   style="margin: 0px 0px;width:70px;" ><input  type="radio" name="decryptedRadio" value="0"><i></i><span style="margin-left: 20px;">萧炎</span></label>
                    <label   class="radio"   style="margin: 0px 0px;;width:70px;" ><input type="radio" name="decryptedRadio" value="-1" checked="true"><i></i><span style="margin-left: 20px;">牧尘</span></label>
                </div>

关键元素：

<i></i>