首页 > 其他分享 >修改radio单选按钮的“圆点”选中颜色

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

时间:2023-04-28 16:47:31浏览次数:35  
标签:opacity color 圆点 transition radio background 单选 border

 

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>

 

标签:opacity,color,圆点,transition,radio,background,单选,border
From: https://www.cnblogs.com/privateLogs/p/17362574.html

相关文章

  • echarts折线实心圆点、折线阴影
    echarts作为我们前端小伙伴常用的可视化库,那我们画出有阴影的折线图,让折线图比较立体感。可以使用折线图的lineStyle实现效果如图代码如下:series:[{data:[150,230,224,218,135,147,260],type:"line",smooth:true,symbol:'circle',//将小......
  • java js JavaScript 设置html:radio的默认选中, js也可以用el表达式
    <html:radioproperty="consumptionClass"value="花了">花了</html:radio><html:radioproperty="consumptionClass"value="赚了">赚了</html:radio><html:radioproperty="consumptionClass"va......
  • Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建和案
    Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享)常用的两款AI可视化交互应用比较:GradioGradio的优势在于易用性,代码结构相比Streamlit简单,只需简单定义输入和输出接口即可快速构建简单的交互页面,更轻松部署模型。适合场景相对简单,想......
  • Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建和案
    Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享)常用的两款AI可视化交互应用比较:GradioGradio的优势在于易用性,代码结构相比Streamlit简单,只需简单定义输入和输出接口即可快速构建简单的交互页面,更轻松部署模型。适合场景相对简单,......
  • java排序算法2(简单选择排序、堆排序)
    简单选择排序---不稳定选择排序在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后以此类推,直到所有元素均排序完毕。for(inti=0;i<arr.length;i++){//记录最小值下标位置intmin=i;for(intj=i+1;j<arr.leng......
  • Vue中单选框或复选框中的label内容过长,超出范围
     解决办法:1、直接把字体调小2、当需要的字体大小还是超出了范围时在css中写(如果是复选框;单选框的class:el-radio__label).el-checkbox__label{text-overflow:ellipsis;white-space:normal;line-height:18px;......
  • Hugging News #0414: Attention 在多模态情景中的应用、Unity API 以及 Gradio 主题构
    每一周,我们的同事都会向社区的成员们发布一些关于HuggingFace相关的更新,包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等,我们将其称之为「HuggingNews」,本期HuggingNews有哪些有趣的消息,快来看看吧!社区动向Attention在视觉领域的应用注......
  • JS-轮播图(圆点点击,左右侧按钮切换,自动播放)
    //放入数据//点击小圆圈,可切换对应图片,小圆圈的样式也跟随变动//点击左右侧按钮,可来回切换图片,小圆圈样式跟随变动//可自动切换轮播图,鼠标移入后不在自动滚动(function(){vardate=[{img:'./image/banner.jpeg'},{......
  • JQ插件:radiosToSlider
    demo:http://rubentd.com/radios-to-slider/用法:<scriptsrc="js/jquery-1.10.2.min.js"></script><scriptsrc="js/jquery.radios-to-slider.js"></script><script> $(document).ready(funct......
  • css自定义复选框和单选框
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><styletype="text/css">*{margin:0;padding:0;box-sizing:border-box;}......