问题描述
我正在使用 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>
解决方法
你在找这个吗?
.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;
}