2017-04-10 268 views
0

我正在使用多選擇下拉菜單,但我不知道如何更改該默認灰色按鈕的顏色,任何人都可以請幫我嗎?如何更改多選擇下拉列表按鈕的顏色

$(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, 


}); 
+1

你可以創建一個'fiddle'或'jsbin'? –

+0

我不明白你在問什麼 – aayushi

回答

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>' } 
0
1.first add one id to your button 
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>', 
      } 
     }); 
2.Then in html file, 
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; 

} 
相關問題