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

如何更改未选中的状态颜色并添加背景色？

---

（目前它只是一个灰色轮廓。我需要更改轮廓和背景色。）

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

注意：您需要使用

！重要信息

如果您希望图标的原色上的标志影响选中状态，因为在选中收音机时，Vuetify将使用一个标志作为原色。（我知道OP特别询问了未检查状态，但我想为未来的访问者指出这一点）