修改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>

 

posted on   五官一体即忢  阅读(1883)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示