Search code examples
cssstylesbordervuetify.jstextfield

How to change Vuetify v-text-field outlined border

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.

Solution

  • You could try using the following CSS:

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