样式 bootstrap multiselect 看起来像正常的 select

Question

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

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

<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 来显示差异。

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

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

Answer 1

Bootstrap Multiselect 正在那里创建一个按钮，该按钮接收 classes 应用的某些样式，例如 .multiselect。您可以很容易地以如下方式覆盖它们：

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

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

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

此处适用于您的 fiddle:

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

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

样式 bootstrap multiselect 看起来像正常的 select

style bootstrap multiselect to look like a normal select

css

bootstrap-multiselect