更改 Vuetify 单选按钮的未选中状态颜色答案

【问题标题】：Change unchecked state color of Vuetify radio button更改 Vuetify 单选按钮的未选中状态颜色
【发布时间】：2021-08-16 19:27:19
【问题描述】：

如何更改Vuetify radio button 的未选中状态颜色并添加背景颜色？（目前它只是一个灰色的轮廓。我需要更改轮廓和背景颜色。）

【问题讨论】：

【解决方案1】：

Vuetify 使用 SVG 图标来渲染单选按钮，图标本身只是一个圆形轮廓。它继承父元素的当前颜色。因此，要更改轮廓颜色，您只需在收音机的图标元素上定义一个 CSS color 属性即可。

.v-radio .v-icon {
   color: red;
}

由于SVG图标只是一个轮廓，不修改父节点是无法改变背景的，因为父节点只是一个正方形。您可以更改背景颜色，但您必须应用一些其他样式才能将容器形状更改为圆形并将填充限制在圆形轮廓的边界内。纯色背景颜色会溢出 SVG 圆圈的边界，因此可以使用径向渐变来有效地将填充“缩小”到所需的大小。

.v-radio .v-icon {
   color: red;
   border-radius: 50%;
   background-image: radial-gradient(blue 50%, transparent 50%);
}

注意：如果你想影响 选中状态，你需要在图标的原色上使用 !important 标志，因为 Vuetify 将使用一个标志检查收音机时的原色。（我知道 OP 专门询问了 unchecked 状态，但我也想为未来的访问者指出这一点）。

【讨论】：