Ant-Design-Of-Vue radio-group单选按钮去除边框只留文字

浪漫不敌风月

于 2022-08-23 11:08:49 发布

阅读量725

点赞数

分类专栏： css ant design vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_46550764/article/details/126480718

版权

ant design vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

去除全部边框样式，包括浅蓝色阴影，样式如下

  :deep(.ant-radio-button-wrapper) {
    border: none;
  }
  :deep(.ant-radio-button-wrapper:not(:first-child)::before) {
    display: none !important;
  }
  :deep(.ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child) {
    border: 0;
  }
  :deep(.ant-radio-button-wrapper:focus-within) {
    box-shadow: 0 0 0 3px transparent !important;
  }
  :deep(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
    border-color: transparent !important;
  }
  :deep(.ant-radio-button-wrapper:first-child) {
    border-left: none;
  }

效果：仅保留文字着色