Multi-Select Dropdown: Custom Checkbox

Question

I'm at the end of my rope. I am working on a project that has several multi-select dropdowns, which are intended to be checked off in order to filter results. I am trying to get the check-boxes to be a customized one given to me as a png, and no matter what I try, nothing works. It's frustrating because for a single-select dropdown menu, it seems to work very easily.

I've tried many different plugins, and they all do pretty much the same thing, which is seemingly override any attempt to replace the default, OS-provided checkbox. here are a few examples of plugins I've tried:

multiple select
multi-select dropdown list
bootstrap multiselect

For a single-select menu, the following worked fine:

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;
}

Depending upon how the different plugins layout the elements to create the dropdown menu, I've adjusted the CSS selectors. I can definitely move the checkboxes around, hide them, etc. so I know I'm using the correct CSS rules. I just can't make them use the tiny sprite sheet.

I've looked everywhere for hours, and can't come up with anything. Something this small being this difficult to figure out is really killing my confidence, because I've been at it for more hours than I'd like to admit. Anyone who can help will be a saint forever in my eyes!

Solution

try this one updated..............

  $('#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>