How to change Vuetify v-text-field outlined border

Question

I have been strying to override the default border color of outlined v-text-field. Basically I want a specific color all the times (unfocused, focused, hover) playing with the codepen below:

https://codepen.io/hoiratnhieu/pen/GRpjEeb

<v-text-field
              label="Outlined"
              outlined
              dense
            ></v-text-field>

Can someone provide some much needed help here?

Thank you.

Answer 1

You could try using the following CSS:

.v-text-field--outlined fieldset {
    color: red !important;
}

Answer 2

If you are using SASS variables, customize the light theme like this:

// Your custom main.scss

$material-light: (
  'text-fields': (
    'outlined': rgba(0,0,0, 0.19),
    'outlined-hover': rgba(0,0,0, 0.38),
  ),
);

The focus color is simply the primary color. You can overwrite all variables in @vuetify/src/styles/settings/_light.scss like that.