1

there is a grey outline around the button occurs when the dropdown is clicked for the second time.

enter image description here

so far in css I have added this style properties:

.dropdown ::v-deep .dropdown-toggle {
    color: black;
    background-color: white;
    box-shadow: none;
    &:after {
        display: none;
    }
    &:hover {
        background: green;
        color: white;
        border-color: transparent;
    }
}
kissu
  • 40,416
  • 14
  • 65
  • 133
FreeHuman jen
  • 27
  • 1
  • 6
  • Maybe it's not a border-color but an actual outline? https://developer.mozilla.org/en-US/docs/Web/CSS/outline Use your browser devtools to be sure by inspecting the element. – kissu Sep 15 '22 at 12:47
  • I tried doing the inspect but even after adding outline:none it appears. https://bootstrap-vue.org/docs/components/dropdown I have taken the dropdown example from here. If you see any of the example, first click the button/dropdown the dropdown list exapands. Until then there is no outline, but you click the dropdown button again to close the panel, there is an outline surrounding the button. – FreeHuman jen Sep 15 '22 at 12:55
  • I achieved to remove it by targeting `dropdown-toggle:active` and with `box-shadow: none !important` as suggested in this answer: https://stackoverflow.com/a/23337989/8816585 – kissu Sep 15 '22 at 14:09

1 Answers1

0

I achieved to remove it by targeting .dropdown-toggle:active and setting box-shadow: none !important as suggested in this answer: bootstrap button shows blue outline when clicked

PS: add some deep selectors if needed.

kissu
  • 40,416
  • 14
  • 65
  • 133