CODEWITHSUNDEEP
cssvuetify.jsnuxt.js
Sébastien Serre
Sébastien Serre

Reputation: 394

How to change the bottom border color of a Vuetify v-overflow-btn?

I'm actually building a website in nuxt.js using Vuetify. I have created a menu based on one v-overflow-btn, one v-text-field and one v-btn. Here is what my menu looks like actually.

Cause I'm a little bit maniac, I would like to change the bottom border color of my v-overflow-btn to match all the different dividers color bar of my menu. By default, the color is black.

I already tried to define my own CSS in the style section as below:

<style>
  v-overflow-btn {
    border-color:grey !important;
  }
</style>

But nothing changes...

Could someone behelp me to change this border color? Thanks in advance :)

Upvotes: 5

Views: 27686

Answers (2)

Roy Ganor
Roy Ganor

Reputation: 111

I had to add the deep selector in case someone else is having this issue.

.nbb >>> .v-input__slot:before  {
  border-color: white !important;
}

Upvotes: 1

Ejdrien
Ejdrien

Reputation: 2910

Try this

<style>
  .v-overflow-btn .v-input__slot::before {
    border-color: grey !important;
  }
</style>

Upvotes: 6

Related Questions