CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvue.jsbootstrap-vue
Rizakha
Rizakha

Reputation: 131

Bootstrap-Vue b-dropdown button color when open

The code below gets me what I need in terms of button color and hover. However, the button color goes back to the default gray when the menu is open and you move your cursor away from the button. How can you customize the button when the menu is open?

Current code that works:

<style scoped>
    /deep/ .dropdown > button {
        color:#001E61;
        background:#ffffff;
        border-color:#001E61;
        font-weight:bold;

    }
    /deep/ .dropdown > button:hover {
        color:#E81F76;
        background:#ffffff;
        border-color:#E81F76;
        font-weight:bold;
    }
</style>

Code I have tried to customize color of the button when menu is open:

<style scoped>
    /deep/ .dropdown > button:hover,
    .dropdown > button:active,
    .dropdown > button:focus    {
        color:#E81F76;
        background:#ffffff;
        border-color:#E81F76;
        font-weight:bold;
    }
</scoped>

Upvotes: 1

Views: 584

Answers (1)

Dan
Dan

Reputation: 63059

When the dropdown is expanded, the .dropdown div has a .show class applied, which you can use to style the button:

/deep/ .dropdown.show > button {
  background: red;
}

Also if your project is current, it's recommended to use >>> rather than /deep/, which is deprecated.

Upvotes: 1

Related Questions