antd radio-group选中时的浅蓝色外边框阴影去除

最新推荐文章于 2024-04-27 14:59:16 发布

HerayChen

最新推荐文章于 2024-04-27 14:59:16 发布

阅读量496

点赞数 2

分类专栏：笔记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45832807/article/details/128973718

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

最终实现的效果：
在这里插入图片描述

::v-deep(.ant-radio-button-wrapper) {
    color: #fff;
    background: #062e51;
    border: 1px solid #638EBB;
    transition: inherit;
}
::v-deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
    color: #fff;
    background: #19B1F6;
    box-shadow: none;
}
::v-deep(.ant-radio-button-checked) {
    border: 1px solid #19B1F6;
}
::v-deep(.ant-radio-button-wrapper:first-child) {
    border-left:  1px solid #638EBB;
}
// 去除radio两遍的间隙线
::v-deep(.ant-radio-button-wrapper:not(:first-child)::before) {
    display: none !important;
}
// 这个不需要去掉，去掉之后选中的按钮和未选中的大小不一样(白色背景的时候可以去掉，根据实际情况来看)
//::v-deep(.ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child) {
//    border: 0;
//}
// 重点：选中之后深色模式下有个白色的边框（加了下面代码就没有了）
::v-deep(.ant-radio-button-wrapper:focus-within) {
    box-shadow: 0 0 0 3px transparent !important;
}
//::v-deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
//    border-color: transparent !important;
//}