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

Question

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

Answer 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%);
}

注意：如果要影响选中状态[=22]，则需要在图标的主要颜色上使用 !important 标志=] 因为 Vuetify 会在选中无线电时使用一个作为原色。（我知道 OP 特别询问了未检查状态，但我也想为未来的访问者指出这一点）。

Change unchecked state color of Vuetify radio button