Bootstrap-Vue b-dropdown button color when open

Question

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>

Dan · Accepted Answer · 2021-02-07 20:22:55Z

1

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.

answered Feb 7, 2021 at 20:22

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rizakha Over a year ago

Great, thanks for the answer. Quick question, is there a source that has all these classes for each bootstrap component?

Dan Over a year ago

You're welcome. There isn't one that I know of. This class is mentioned in the normal Bootstrap docs but I inspected to find it

Collectives™ on Stack Overflow

Bootstrap-Vue b-dropdown button color when open

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related