如何更改多選下拉列表按鈕的顏色

Question

我正在使用多選下拉菜單，但是我不知道如何更改默認灰色按鈕的顏色，有人可以幫我嗎？

$(function() {
    $('#myproject').multiselect({
        selectableHeader: "<div class='custom-header'>Selectable items</div>",
        selectionHeader: "<div class='custom-header'>Selection items</div>",
        selectableFooter: "<div class='custom-header'>Selectable footer</div>",
        selectionFooter: "<div class='custom-header'>Selection footer</div>",
        nonSelectedText: '- - -Select Project- - -',
        includeSelectAllOption: true,
        maxHeight: 400,
        dropUp: true,
        buttonWidth: 230,

    });
});

Answer 1

使用以下代碼：

$('#myproject').multiselect({
    nonSelectedText: '- - -Select Project- - -',
    includeSelectAllOption: true,
    maxHeight: 400,
    dropUp: true,
    buttonWidth: 230,
    enableFiltering: true,
    enableHTML: true,
    buttonClass: 'btn small btn-primary',
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> &nbsp;<b class="fa fa-caret-down"></b></button>',
        ul: '<ul class="multiselect-container dropdown-menu"></ul>',
        filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
        filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default btn-white btn-grey multiselect-clear-filter" type="button"><i class="fa fa-times-circle red2"></i></button></span>',
        li: '<li><a tabindex="0"><label></label></a></li>',
        divider: '<li class="multiselect-item divider"></li>',
        liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
    }
})

Answer 2

首先，向您的按鈕添加一個ID：

function showCheckboxes1() {
  $('#lstFruits').multiselect({
  templates: {
   button: '<button type="text" id="mutiselectButton" class="form-control multiselect dropdown-toggle" data-toggle="dropdown" ><span class="multiselect-selected-text"></span> &nbsp;<b class="fa fa-caret-down"></b></button>',
    }
  });
}

然后在HTML文件中：

button#mutiselectButton {
    text-align: left;
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    color: #555;
    border: 1px solid #ccc;
    text-shadow: 0 0 0 #fff;
    box-shadow: none;
}