如何禁用 v-text-field 聚焦效果？

Question

我有以下

v-text-field

有以下默认值

// defaults.ts (used by Vuetify)

const INPUT_DEFAULTS = {
  color: '#8AB8E5',
  baseColor: '#8AB8E5',
  bgColor: '#E8F1FA',
  rounded: 't-lg',
  persistentHint: true
}

const defaults = {
  VTextField: INPUT_DEFAULTS
}

这些是我的 base.css 中与组件相关的 CSS 规则

.v-input:not(.v-input--error) .v-label,
.v-input:not(.v-input--error) .v-messages {
  color: rgb(var(--v-theme-secondary-text)) !important;
}

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

.v-field.v-field--focused .v-field__outline {
  --v-field-border-width: 3px;
}

这就是聚焦时的样子 正如你所看到的，它的颜色变成了某种灰色。我该如何解决这个问题？如何禁用组件聚焦时应用的样式？

Answer 1

试试这个：

/* Ensure the label and input control colors stay consistent when focused */
.v-field.v-field--focused .v-label, 
.v-field.v-field--focused .v-input__control, 
.v-field.v-field--focused .v-messages {
  color: #8AB8E5 !important; /* Same color as your default input color */
}

/* Adjust the border width and color when the field is focused */
.v-field.v-field--focused .v-field__outline {
  --v-field-border-width: 2px !important; /* Set desired border width */
  --v-theme-primary: #8AB8E5 !important;  /* Maintain the same border color on focus */
}

/* Disable or control background color on focus */
.v-field.v-field--focused {
  background-color: #E8F1FA !important; /* Keep the background color consistent */
}

/* If you want to completely remove focus border changes */
.v-field.v-field--focused .v-field__outline {
  --v-field-border-width: 0px !important; /* Disable focus border if not needed */
}

/* Keep the label, messages, and input color consistent in all states */
.v-input:not(.v-input--error) .v-label,
.v-input:not(.v-input--error) .v-messages {
  color: rgb(var(--v-theme-secondary-text)) !important;
}

/* Ensure border opacity is fully visible */
#app .v-field__outline {
  --v-field-border-opacity: 1;
}

/* Adjust focused field border thickness */
.v-field.v-field--focused .v-field__outline {
  --v-field-border-width: 3px;
}