Changing the colour of the border/outline of a v-select

[thany]

Suppose I got this select:

<v-select variant="outlined" />

How do I go about changing the outline color?

In the documentation it exposes basically no Sass variables. Turns out I had to move over to the documentation of VField (no mention of this anywhere in VSelect's documentation 😑) and there's a whole list of weirdly specific Sass variables to override. It's all over the place, in terms of how weirdly specific some of them are, and how a lot of closely related ones are missing (i.e. hardcoded in vuetify's own styles).

That problem exists here too: There is $field-border-radius and $field-border-width, but NOT $field-border-color.

Why? Looking into the source code it looks like the outline color is hard-coded to currentColor. Again, why? Why are controls so fantastically customisable, and yet so harshly hardcoded at the same time? I don't get that.

---

A very dirty hack, you might imagine, would be to override it using CSS rather than any Sass variable.
Well, the outline color is specified in this seletor:

.v-field--variant-outlined .v-field__outline__start,
.v-field--variant-outlined .v-field__outline__notch::before,
.v-field--variant-outlined .v-field__outline__notch::after,
.v-field--variant-outlined .v-field__outline__end

And I don't want to override that in my Sass code. It's way too obnoxious, peering too deeply into the framework, and therefor it is not a sustainable solution to override it like that.

[KaelWD]

currentColor is inherited so you can just target .v-field__outline

Turns out I had to move over to the documentation of VField (no mention of this anywhere in VSelect's documentation

Yes we need to figure out a readable way to display what components and composables everything is based on.

there's a whole list of weirdly specific Sass variables to override. It's all over the place, in terms of how weirdly specific some of them are, and how a lot of closely related ones are missing

I've had this problem a lot too, I almost never end up using variables when I need to customise something because it's 10x more work than just overriding the styles directly. We really need to only be exposing things that someone might realistically want to change.

[thany]

currentColor is inherited so you can just target .v-field__outline

How should I do this application-wide? Do you mean like just put a CSS override somewhere in a random CSS file and make sure it gets imported somewhere? Feels hacky, tbh.

Also who guarantees that this is a sustainable solution? It wouldn't be the first time that Vuetify has breaking changes - even between minor version updates - for people that modify the framework's internally generated elements and styles.

We really need to only be exposing things that someone might realistically want to change.

This will lead to an over-opinionated framework. Material UI is opinionated already, but having a seemingly arbitrary selection of random things that can be modified, seems counter-productive and is definitely a bit confusing.

because it's 10x more work than just overriding the styles directly

I understand where you're coming from. Maybe I'm a bit novice with Vuetify, but sometimes I feel like I can just recreate a (simple) component quicker than modifying one from Vuetify.

[darkbasic]

No matter what I try I cannot override the black outline that appears when the v-select is focused.
In the screenshot before I've tried to override it with a red color but it clearly shows a different outline so that's not the right style.

I've tried all of the following:

.v-field--focused {
  outline-color: red !important;
  outline-style: solid !important;
}

.v-field__outline {
  outline-color: red !important;
  outline-style: solid !important;
}

.v-field--variant-outlined .v-field__outline__start,
.v-field--variant-outlined .v-field__outline__notch::before,
.v-field--variant-outlined .v-field__outline__notch::after,
.v-field--variant-outlined .v-field__outline__end {
  outline-color: red !important;
  outline-style: solid !important;
}

Can't find the right style to override even with Chrome developers tools.

[amirkarami-dev]

this is current :
.v-text-field .v-input__control {
border: 1px solid var(--color-neutral-200);
color: var(--color-primary-500);
}

[remote-userd]

all bro just here

.v-field__outline {
--v-field-border-width: 10px !important;;
--v-field-border-opacity: 1 !important;
}

thanks me later