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?
The DOM inspector shows that the gray color comes from div class v-field__overlay, which is normally 0 opacity when not focused, and then this style when focused:
.v-field--variant-filled.v-field--focused .v-field__overlay {
opacity: calc((0.04 + var(--v-focus-opacity))* var(--v-theme-overlay-multiplier));
}
Basically the opacity becomes non-zero when focused. You can override the style so that opacity is always 0:
.v-field__overlay {
opacity: 0 !important;
}