style bootstrap multiselect to look like a normal select

I am using bootstrap-multiselect to add dropdown multiselect functionaility to selects but I do not like the way it looks and can't seem to overide the style.

I would like it to look like a normal bootstrap form control but adding these classes does nothing.

<h1>Normal BS select</h1>
<div class="input-group input-group-sm mb-2">
  <select class="form-control form-control-sm" id="select1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<h1>
Bootstrap multiselect
</h1>
<div class="input-group input-group-sm mb-2">
  <select class="form-control form-control-sm" id="select2" multiple="multiple">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

I have created a JSfiddle to show the difference.

I have also tried to change the bootstrap-multiselect stylesheet but again nothing I change seems to work

EDIT:- It is the grey background and lack of border of the bootstrap-multiselect that I do not like

Solution

Bootstrap Multiselect is creating a button there which receives certain styles applied by classes like .multiselect. You can pretty easily override these in a way like the following:

button.multiselect {
  background-color: initial;
  border: 1px solid #ced4da;
}

Here, I'm resetting the background color of the button generated by Multiselect by going to its initial value, but you can set it to #ffffff; or something else. The border style is copied from the Bootstrap default for the .form-control class.

If you're not familiar with debugging with Devtools, you can start with Chrome's Devtools overview, or look specifically for tutorials on how to use the devtools or inspector for your browser of choice.

Here it is applied to your fiddle:

https://jsfiddle.net/qzdnkwos/36/

You can tweak as needed.