时间戳

首页 > 解决方案 > 更改 Vuetify 单选按钮的未选中状态颜色

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

问题描述

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

标签： javascriptcssradio-buttonvuetify.js

解决方案

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

.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 专门询问了未检查状态，但我也想为未来的访问者指出这一点）。

推荐阅读