ant design Radio单选框中radio.group 去除边框问题

      我用Radio.Group做了一组单选的图片。本来Radio.Group是自带灰色边框的。如下图:

但是UI要求不要边框。刚开始想的很简单,想直接设置Radio.Button的border为none就行。没想到出现以下问题。

        问题一、设置Radio.Button的border为none后,选中状态的边框就不清晰了。如下图:

 这个的解决办法很简单:在源码中去找antd的选中状态,设置一下即可。代码如下:

    .ant-radio-button.ant-radio-button-checked {
      border: solid 1px #1890ff;
    }

这样就解决了边框选择后的问题。

问题二、两个选项之间出现了一条灰色的线,如下图:

 

         我本以为这个只是一个容器的左边框颜色设置问题。所以在antd的css样式中疯狂的找border-left的样式。结果找了半天都没找到。就当我快放弃的时候,在后端找到一个这个边框所在位置对应的样式,当然,我还是直接在这个样式里面写了border:"none",显而易见,这样还是没有效果。突发奇想,我又在里面写了background-color=red,测试着玩,。。。。。好家伙。。。。。。。这条线直接就变成红色的了。============>>>>>>>>这不就显而易见了麻,图中这条线并不是真的只是一条线,而是容器的背景==========所以,要隐藏这条线,直接设置背景颜色即可。。。代码如下。。。

    .ant-radio-button-wrapper:not(:first-child)::before {
      background-color: transparent;
    }

emmmm  作为一只菜鸟可真不容易啊。。。。。

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值