cssvue.jsvuejs3vuetifyjs3

How can I add a border bottom to Vuetify v-tabs?


I'd like to achieve following result: enter image description here

I did it by doing this

<v-tabs>
  <v-tab
    v-for="(tab, i) in tabs"
    :key="i"
    v-bind="tab"
  ></v-tab>
</v-tabs>
<v-divider></v-divider>

But I don't want to use the <v-divider>, I'd like to get the same appearance through CSS. I tried this

<template>
  <v-tabs class="bordered-tab">
    <v-tab
      v-for="(tab, i) in tabs"
      :key="i"
      v-bind="tab"
    ></v-tab>
  </v-tabs>
</template>

<style scoped>
.bordered-tab {
  border-bottom: 1px solid red;
}
</style>

And this is the result enter image description here

The blue border should be on top of the red one. How can I do it?

Edit #1

Thanks to @kissu insights, I was able to achieve my goal. This is the full code:

<template>
  <v-tabs class="bordered-tabs">
    <v-tab
      v-for="(tab, i) in tabs"
      :key="i"
      v-bind="tab"
    ></v-tab>
  </v-tabs>
</template>

<style scoped>
.bordered-tabs >>> .v-slide-group__content {
  border-bottom: 1px solid #0000001e;
}
</style>

The other thing I'd like to do is to apply this style to all the .v-slide-group__content without having to explicitly add a class to them, something like:

.v-slide-group__content {
  border-bottom: 1px solid #0000001e;
}

How can I do it?

Edit #2

Since I wanted to apply above class to horizontal <v-tabs> only, I wrote following rule in my main.css

.v-tabs:not(.v-tabs--vertical) .v-slide-group__content {
  border-bottom: 1px solid #0000001e;
}

With this rule

<!-- border-bottom will be applied -->
<v-tabs>
  <!-- tabs... -->
</v-tab>

<!-- border-bottom will not be applied -->
<v-tabs direction="vertical">
  <!-- tabs... -->
</v-tabs>

Solution

  • You can use the following

    <style scoped>
      .edit-those-classes >>> .v-slide-group__content {
        border-bottom: 10px orange solid;
      }
    </style>
    

    Here is a complete reproduction.

    More context about the deep selectors.


    If you want to have this behavior globally, you can have a simpler version by removing scoped

    <style>
      .v-slide-group__content {
        border-bottom: 10px orange solid;
      }
    </style>