如何修改Vuetify所有输入框的透明度？解决样式不生效问题

你设置的opacity是作用在最外层的.v-input容器上，但实际控制边框透明度的是.v-field__outline内部的CSS变量--v-field-border-opacity，所以直接修改外层透明度无效。以下是两种简洁的实现方式：

方式一：内联样式直接覆盖CSS变量 #

直接在v-text-field上通过style属性设置目标变量，CSS变量会继承到子元素中，覆盖默认值：

<v-text-field
  class="foo"
  base-color="primary"
  style="--v-field-border-opacity: 1 !important;"
></v-text-field>

方式二：自定义类复用样式 #

如果需要在多个组件中复用这个样式，推荐定义CSS类来覆盖变量：

.foo .v-field__outline {
  --v-field-border-opacity: 1;
}

组件保持原有写法即可：

<v-text-field
  class="foo"
  base-color="primary"
></v-text-field>

注：如果你的Vuetify版本是3.x，这种通过CSS变量覆盖的方式是官方推荐的自定义组件样式的方式，比硬写元素选择器更稳定。

内容的提问来源于stack exchange，提问作者PyKKe