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!

Naresh Sharma · Accepted Answer · 2016-01-29 07:45:11Z

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>

cherrysoft · Accepted Answer · 2014-09-30 03:34:25Z

0

Try hard linking the background url just to be sure..

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

If that doesn't work - tell me what library you are actually using and I will look into further.

answered Sep 30, 2014 at 3:34

cherrysoft

1,1968 silver badges17 bronze badges

2 Comments

user2658630 Over a year ago

I'll give this a shot - thanks for your response! I'll let you know if it works. I'm using jQuery for now (and that's it in terms of libraries).

user2658630 Over a year ago

Okay, it looks like it's working, but the regular checkboxes are still showing up. I was testing in different browsers, and in IE I came to discover that the sprites are definitely there, it's just behind the normal checkbox that would show up anyway. Do you know how I might be able to fix that? I don't know how to attach an image here, or else I would to show you what I'm talking about.

Collectives™ on Stack Overflow

Multi-Select Dropdown: Custom Checkbox

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related