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-multiselect样式表，但我再也没有改变似乎工作

编辑： - 我不喜欢的灰色背景和缺少bootstrap-multiselect的边界

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或inspector的教程。

这里适用于你的小提琴：

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

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

style bootstrap multiselect看起来像普通的选择

1 个答案: