How do I hide button and drop down arrow from Vue bootstrap dropdown?

Question

I want to hide the drop down arrow and button color, I'm using vue-bootstrap. is there any other method that I can use to make a drop down in my navbar without arrow and button color? I already tried a lot of method but it seems like every styling that I do is not working on vue-bootstrap

<b-dropdown
id="dropdown-left"
text="RECIPE"
ref="dropdown"
class="m-md-2">
   <b-dropdown-item>A</b-dropdown-item>
   <b-dropdown-item>B</b-dropdown-item>
</b-dropdown>

And There is source of package:dropdown-bootstrap

Answer 1

You gotta override the style of the default classes responsible for what you see in the dropdown component, I don't know whether you want to change the dropdown permanently in the app or is it in just one case so either you give your dropdown a class name & use this styles or simply override the default classes in your stylesheet like this:

.btn-secondary { /* this is the button's class */
    color: #000;
    background-color: transparent;
    border-color: transparent;
}
.dropdown-toggle::after{ /*this is responsible for the arrow you see in the button*/
    display:none;
    }
    

.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover { /* this will change the button's hover & focus effect*/
    color: #000;
    background-color: #e7e7e7; /*just assumed you want it to be colored on hover IDK */
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle { /*and apparently this is responsible for when the button is active*/
     color: #000; 
    background-color: #e7e7e7; 
}