如何在蚂蚁设计中更改单选按钮的颜色？ [英] How to change radio button color in ant design?

问题描述

我正在使用antd收音机和复选框。我想给他们定制颜色。我找到了有关复选框的答案，但没有找到更改单选按钮颜色的方法。

I'm using antd radios and checkboxes. I want to give custom colors to them. I found answer about checkbox but found no way to change radio button color.

有没有办法做到这一点？

Is there any way to do so?

推荐答案

您可以通过覆盖以下CSS类来实现它：

You can achive it by overriding following css classes:

.ant-radio-checked .ant-radio-inner{
  border-color: red !important ;
}

.ant-radio-checked .ant-radio-inner:after{
  background-color: red;
}

.ant-radio:hover .ant-radio-inner {
  border-color: red ;
}

第一个块负责为收音机中点周围的圆圈着色。您可以忽略！important规则，但是必须覆盖：focus选择器，例如：

First block is responsible for coloring the circle around the dot in radio. You can ignore !important rule but then you have to override :focus selector like:

.ant-radio-checked .ant-radio-inner:focus{
  border-color: red;
}

第二个块将所选收音机中间的点涂上颜色。悬停时最后一个色环。我不太确定为什么ant-radio-inner应该放在radio：hover里面，但是对我有用。

Second block color the dot in the middle of selected radio. The last one color circle on hover. I am not completely sure why ant-radio-inner should be inside radio:hover, but it works for me.

这篇关于如何在蚂蚁设计中更改单选按钮的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！