CODEWITHSUNDEEP
cssstylesbordervuetify.jstextfield
Viet
Viet

Reputation: 53

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.

Upvotes: 4

Views: 11176

Answers (2)

Matt Hagemann
Matt Hagemann

Reputation: 1506

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.

Upvotes: 3

Family
Family

Reputation: 1113

You could try using the following CSS:

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

Upvotes: 3

Related Questions