How to use Checkbox inside Select Option

Question

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list. Is there anyway possible t

Answer 1

I started from @vitfo answer but I want to have inside instead of checkbox inputs so i put together all the answers to make this, there is my code, I hope it will help someone.

$(".multiple_select").mousedown(function(e) {
    if (e.target.tagName == "OPTION") 
    {
      return; //don't close dropdown if i select option
    }
    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside 

box }); $(".multiple_select").on('blur', function(e) { $(this).removeClass('multiple_select_active'); //close dropdown if click outside }); $('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple e.preventDefault(); $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click $(this).parent().change(); //trigger change event }); $("#myFilter").on('change', function() { var selected = $("#myFilter").val().toString(); //here I get all options and convert to string var document_style = document.documentElement.style; if(selected !== "") document_style.setProperty('--text', "'Selected: "+selected+"'"); else document_style.setProperty('--text', "'Select values'"); });

:root
{
	--text: "Select values";
}
.multiple_select
{
	height: 18px;
	width: 90%;
	overflow: hidden;
	-webkit-appearance: menulist;
	position: relative;
}
.multiple_select::before
{
	content: var(--text);
	display: block;
  margin-left: 5px;
  margin-bottom: 2px;
}
.multiple_select_active
{
	overflow: visible !important;
}
.multiple_select option
{
	display: none;
    height: 18px;
	background-color: white;
}
.multiple_select_active option
{
	display: block;
}

.multiple_select option::before {
  content: "\2610";
}
.multiple_select option:checked::before {
  content: "\2611";
}

A B C D E