antd去除单选按钮Radio.Button被选中时的浅蓝色外边框阴影

原创于 2022-01-17 12:37:47 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

UI 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何移除antd库中Radio.Group组件选中状态下的浅蓝色边框，通过修改CSS样式实现定制化的视觉效果。

在使用antd的Radio.Group，Radio.Button的时候，被选中按钮的外圈有个浅蓝色的框框，想要去除：

这个时候打开控制台元素，选中该按钮，发现该元素的classname = ant-radio-button-wrapper-checked，去到antd.css文件，搜索该class，找到一个样式的颜色是浅蓝色：

将其覆盖为：

.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
        box-shadow: 0 0 0 3px transparent!important;
    }

即可。