Bootstrap 多选下拉菜单

Question

我正在使用 bootstrap-select，一个基于 Bootstrap 的 JQuery 多选插件来创建多选下拉菜单。

我想为下拉菜单添加一些样式，例如将勾选标记更改为复选框，如下图所示

我不知道该怎么做。有人有想法吗？如果更容易定制，我愿意接受另一个插件。

这是我的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-selected-text-format="count > 3" title='Choose one...' data-width=150px>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

<script>
$(document).ready(function() {
  $('select').selectpicker();
});
</script>

Answer 1

你在找这个吗？

.check-mark{
        color: whitesmoke;
        font-size: 12px;
        padding-left: 6.5px !important;
    }
    .bs-ok-default{
        background-color: black;
        width: 20px;
        border-radius: 20px;
        padding: 5px;
    }