antd-mobile里radio组件中按钮的样式修改

最新推荐文章于 2025-06-30 15:52:28 发布

原创最新推荐文章于 2025-06-30 15:52:28 发布 · 6.4k 阅读

7 ·

CC 4.0 BY-SA版权

antd 同时被 2 个专栏收录

16 篇文章

订阅专栏

css样式

13 篇文章

订阅专栏

本文详细介绍了如何通过CSS代码自定义Radio按钮的样式，包括未选中和选中状态的外圈及内圈样式修改。通过具体代码示例，读者可以学习到如何调整Radio按钮的大小、边框、颜色等属性，实现个性化的设计效果。

原效果图：

修改后效果图：

代码

  
  .am-radio{ //未选中外圈样式的修改
        width: .22rem;
        height: .22rem;
        border: .01rem solid #A4A7A9;
        border-radius: 50%;
        margin-right: .1rem; 
    }
      .am-radio.am-radio-checked{//选中外圈样式的修改
        border: .01rem solid #008CEE;
    }
    .am-radio-inner:after{//选中内圈样式的修改
        height: .08rem;
        width: .08rem;
        border-radius: 50%;
        border: .01rem solid #008CEE;
        background-color: #008CEE;
        top:.05rem;
        left:0.125rem;
    }