How to custom v-carousel delimiter icon-CodePudding

So I'm trying to use v-carousel for my project, but I wanna custom the delimiter icon from built-in

into something larger like this but somehow I couldn't edit or add to change the delimiter into longer size because it's built-in. Any idea how?

CodePudding user response：

In CSS do the following;

.v-carousel__controls__item.v-btn.v-btn--icon {
    background-color: #ebece9; /* Background color of non-active ones */
    height: 2px; /* Height you want */
    width: 40px; /* Width you want */
    border-radius: 0; /* Remove default border radius */
}
  
.v-carousel__controls__item.v-btn.v-btn--icon.v-btn--active {
    background-color: #1f1f1f; /* Colour for active one */
}

.v-carousel__controls__item.v-btn.v-btn--icon:hover {
    background-color: black; /* You might also want to customise the hover effect */
}

.v-btn__content .v-icon {
    display: none; /* Removes the default icon */
}

Working demo