css Question posted in
Some basic documentation can be found here.

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

I have following v-text-field
Resting 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
Focused text field
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?

Tags:

2

Answers


  1. 0

    Try this:

    /* 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;
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search