I have several v-text-field in a form. I want to modify the color of the outline that has been added through Vuetify’s variant=”outline” prop. I am trying to add the relevant scss variables in my main.scss file like so:
@use 'vuetify/settings' with (
$input-outline-color: #E9DEFC,
$input-outline-active-color: #CFBCFF,
$input-outline-inactive-color: #E7DFF6
);
@use 'vuetify' as *;
@use 'vuetify/styles';
I have looked in Vuetify’s API documentation for v-text-field, field and input. I cannot find the appropriate variable names, however. I expect to be able to add the relevant variable names to my main.scss file and modify the default colors for the outline in its native, active and passive states.
3
Haven’t found any predefined scss variable either…
Adding a custom class .custom-outline on the v-text-field, and apply CSS below should work:
<v-text-field
...
outlined
class="custom-outline"
></v-text-field>
Styles:
<style lang="scss" scoped>
.custom-outline :deep(.v-field__outline__start) {
border-color: red !important;
}
.custom-outline :deep(.v-field__outline__end) {
border-color: red !important;
}
.custom-outline :deep(.v-field__outline__notch) {
color: red !important;
}
</style>
3
I discovered the solution. For the outlined variant of Vuetify 3 v-text-field, there are three elements deep within the v-text-field that need to be targeted. Those three elements have these three classes respectively:
.v-field__outline__start
.v-field__outline__notch
.v-field__outline__end
Targeting these is a bit tricky. We need to employ Vuetify’s::deep selector like so:
.custom-outline ::v-deep .v-field__outline__start {
border-color: red !important;
}
.custom-outline ::v-deep .v-field__outline__end {
border-color: red !important;
}
.custom-outline ::v-deep .v-field__outline__notch {
color: red !important;
}