样式引导多选看起来像普通选择

Question

我正在使用 bootstrap-multiselect 将下拉多选功能添加到选择中，但我不喜欢它的外观并且似乎无法覆盖样式。

我希望它看起来像一个普通的引导表单控件，但添加这些类没有任何作用。

<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>

我创建了一个JSfiddle 来显示差异。

我也尝试更改引导多选样式表，但我所做的任何更改似乎都不起作用

编辑：- 我不喜欢引导多选的灰色背景和缺少边框

Answer 1

Bootstrap Multiselect 正在那里创建一个按钮，该按钮接收 .multiselect 等类应用的某些样式。您可以通过以下方式轻松覆盖这些：

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

在这里，我通过将 Multiselect 生成的按钮的背景颜色重置为其初始值，但您可以将其设置为 #ffffff; 或其他值。边框样式是从 .form-control 类的 Bootstrap 默认值复制而来的。

如果您不熟悉使用 Devtools 进行调试，您可以start with Chrome's Devtools overview，或专门查找有关如何为您选择的浏览器使用 devtools 或检查器的教程。

这里它适用于你的小提琴：

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

您可以根据需要进行调整。