多選下拉列表：自定義複選框

Question

我在我的繩索末端。我正在研究一個有多個多選下拉列表的項目，這些下拉列表可用於檢查以篩選結果。我試圖讓複選框成爲一個自定義的複選框，不管我嘗試什麼，都沒有任何效果。這令人沮喪，因爲對於單選下拉菜單，它似乎很容易工作。

我已經嘗試了許多不同的插件，他們都做幾乎同樣的事情，這是看似覆蓋任何試圖替換默認，OS提供的複選框。這裏有插件的幾個例子，我已經試過：

multiple select
multi-select dropdown list
bootstrap multiselect

對於單選擇菜單，下面工作得很好：

input[type="checkbox"] { 
    display:none; 
} 

input[type="checkbox"] + label span { 
    display:inline-block; 
    width:6px; 
    height:6px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url('../images/check_radio_sheet.png') left top no-repeat; 
    cursor:pointer; 
    margin-right:12px; 
} 

input[type="checkbox"]:checked + label span { 
    background:url('../images/check_radio_sheet.png') -10px top no-repeat; 
} 

取決於如何不同的插件佈局元素來創建下拉菜單，我調整了CSS選擇器。我肯定可以移動複選框，隱藏它們等等，所以我知道我使用了正確的CSS規則。我只是不能讓他們使用微小的精靈表。

我到處找小時，並不能拿出任何東西。這個難以理解的事情真的讓我失去了信心，因爲我已經忍受了超過我想要承認的時間。任何能夠幫助的人都會永遠成爲我眼中的聖人！

Answer 1

嘗試硬鏈接的背景URL只是要確定..

background:url('http://yourdomain.com/images/check_radio_sheet.png') 

如果不行 - 你實際上使用的是什麼庫告訴我，我會進一步研究。

Answer 2

試試這個更新..............

$('#txtPL').keyup(function() { 
 
     filter(this); 
 
    }); 
 

 
function filter(element) { 
 
     var value = $(element).val().toLowerCase(); 
 
     $(".customDrop > li").each(function() { 
 
      if ($(this).text().toLowerCase().indexOf(value) > -1) { 
 
       $(this).show(); 
 
      } else { 
 
       $(this).hide(); 
 
      } 
 
     }); 
 
     $(".customDrop").show(); 
 
    } 
 
    
 
    $("#chkAll").change(function() { 
 
    var chkAll = $(this).is(':checked'); 
 
    if (chkAll) 
 
    $(".chkProduct").prop("checked", true); 
 
    else 
 
    $(".chkProduct").prop("checked", false); 
 
}); 
 
    
 

.scrollable{ 
 
    overflow: auto; 
 
    width: 300px; /* adjust this width depending to amount of text to display */ 
 
    height: 200px; /* adjust height depending on number of options to display */ 
 
    
 
} 
 
.scrollable select{ 
 
    border: none; 
 
} 
 
.customDrop, customDropHeader 
 
{ 
 
    padding-left:0px !important; 
 
    z-index:999999999; 
 
    position:absolute; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
    } 
 
.listItemPL 
 
{ 
 
    cursor:pointer; 
 
    padding:5px; 
 
     border:1px solid #94c0d2; 
 
    list-style:none; 
 
    border-bottom-style:none; 
 
    background-color:#daecf4; 
 
     
 
     
 
    } 
 
    .listItemPL:hover 
 
    { 
 
    background-color: #9ED9F9; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<h3> 
 
Type Below Developer Name 
 
</h3> 
 
<ul class="customDropHeader" style=" padding-left:0px; margin-bottom:0px;"> 
 
<li class="k-textbox"> 
 
<input type="text" autocomplete="off" name="name" id="txtPL"/> 
 
</li> 
 
</ul> 
 
<ul class="customDrop" style="max-height:200px; overflow-y:scroll; margin-top:2px;"> 
 
<li class="listItemPL" style=" max-width:380px; min-width:380px; "> 
 
<label> 
 
<input type="checkbox" id="chkAll" onchange="SelectAll()" value="0" /> Select All</label> 
 

 
</li> 
 

 
<li class="listItemPL" style=" max-width:380px; min-width:380px;"> 
 
<label>   
 
<input type="checkbox" name="AllcheckedProductsPL" class="chkProduct" /> Naresh Sharma </label> 
 
</li> 
 
<li class="listItemPL" style=" max-width:380px; min-width:380px;"> 
 
<label>   
 
<input type="checkbox" name="AllcheckedProductsPL" class="chkProduct" /> Shiv kumar Shrimali </label> 
 
</li> 
 
<li class="listItemPL" style=" max-width:380px; min-width:380px;"> 
 
<label>   
 
<input type="checkbox" name="AllcheckedProductsPL" class="chkProduct" /> Praksh Menaria </label> 
 
</li> 
 
<li class="listItemPL" style=" max-width:380px; min-width:380px;"> 
 
<label>   
 
<input type="checkbox" name="AllcheckedProductsPL" class="chkProduct" /> Yogesh Malviya </label> 
 
</li> 
 
<li class="listItemPL" style=" max-width:380px; min-width:380px;"> 
 
<label>   
 
<input type="checkbox" name="AllcheckedProductsPL" class="chkProduct" /> Vikas Jain </label> 
 
</li> 
 
<li class="listItemPL" style=" max-width:380px; min-width:380px;"> 
 
<label>   
 
<input type="checkbox" name="AllcheckedProductsPL" class="chkProduct" /> Neelkanth Purohit </label> 
 
</li> 
 
</ul> 
 

 

 
</h1> 
 
</h1>