How can I disable v-text-field focused effect?

I have following v-text-field

which has following defaults

// defaults.ts (used by Vuetify)

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

const defaults = {
  VTextField: INPUT_DEFAULTS
}

and these are the CSS rules inside my base.css related to the component

.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;
}

this is how it looks like when focused

As you can see its color changed to some kind of gray. How can I fix this issue? How can I disable the styles applied when the component is focused?

You need to sign in to view this answers