如何禁用v-text-field聚焦效果并修复聚焦颜色异常问题

问题原因 #

聚焦时组件边框变灰色，是因为Vuetify默认会将聚焦状态的输入框边框颜色切换为主题的primary色（你的主题中primary色为灰色），而当前的全局配置和CSS规则未覆盖这一默认行为。

解决方案 #

方案1：通过Vuetify主题配置统一设定颜色 #

在Vuetify主题中注册自定义颜色，确保聚焦时使用指定的#8AB8E5：

// 你的Vuetify配置文件（如vuetify.ts）
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          customInput: '#8AB8E5', // 注册自定义颜色变量
        },
      },
    },
  },
  defaults: {
    VTextField: {
      color: 'customInput', // 绑定自定义颜色到组件
      baseColor: 'customInput',
      bgColor: '#E8F1FA',
      rounded: 't-lg',
      persistentHint: true
    }
  }
})

这种方式符合Vuetify的设计规范，能全局统一控制输入框的激活态颜色。

方案2：用CSS强制覆盖聚焦样式 #

如果不想修改主题配置，直接在base.css中添加以下规则，强制覆盖聚焦时的边框颜色：

/* 覆盖聚焦时的边框颜色，保持与未聚焦状态一致 */
.v-field.v-field--focused:not(.v-input--error) .v-field__outline {
  --v-field-border-color: #8AB8E5 !important;
}

/* 若聚焦时标签也变灰，同时覆盖标签颜色 */
.v-input.v-input--focused:not(.v-input--error) .v-label {
  color: #8AB8E5 !important;
}

方案3：完全禁用聚焦时的样式变化 #

如果希望聚焦状态与未聚焦状态完全一致，可禁用所有聚焦相关的样式修改：

/* 保持聚焦时边框宽度、颜色与未聚焦一致 */
.v-field.v-field--focused .v-field__outline {
  --v-field-border-width: 1px; /* 若你需要保留3px宽度则改为3px */
  --v-field-border-color: #8AB8E5 !important;
}

/* 禁用标签的聚焦颜色变化 */
.v-input.v-input--focused:not(.v-input--error) .v-label {
  color: rgb(var(--v-theme-secondary-text)) !important;
}

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