JSFiddle - React, Tailwind, and code Playground

by ti2005

HTML

<form>
  <div class="multiselect">
    <div class="selectBox"onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
   <!--   <div id="checkboxes">
     <label for="one">
        <input type="checkbox" id="one" />First option</label>
     <label for="two">
        <input type="checkbox" id="two" />Second option</label>
      <label for="three">
        <input type="checkbox" id="three" />Third option</label>
      <label for="four">
       <input type="checkbox" id="fourth" />fourth option</label>
         </div>  -->
</form>

CSS

.multiselect {
  width: 200px;
}

 #checkboxes {
  display: none;
  border: 1px #dadada solid;
}
.selectBox {
  position: relative;
}

#checkboxes label {
  display: block;
}
.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

JavaScript

var expanded = false;
var label;
var inp;
var input = [
{id : 1 , value : 'First option'},
{id : 2 , value : 'Second option' },
{id : 3 , value : 'Third option' },
{id : 4 , value : 'Fourth option'}
]
 var div = document.createElement('div');
  div.setAttribute("id","checkboxes");
    
for(var i=0; i<input.length; i++){
   label = document.createElement("label");
   inp = document.createElement("input");
   inp.setAttribute('id', input[i].id);
   inp.setAttribute('type', 'checkbox');
   label.setAttribute('value', input[i].value);
   console.log(inp);
   label.appendChild(ínp);
   var checkboxes = document.getElementById('checkboxes');
   checkboxes.appendChild(label);
}

document.addEventListener('mouseup', function(e) {
  var checkboxes = document.getElementById('checkboxes');
  if (!checkboxes.contains(e.target)) {
    checkboxes.style.display = 'none';
  }
});

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!this.expanded) {
    checkboxes.style.display = "block";
    this.expanded = true;
  } else {
    checkboxes.style.display = "none";
    this.expanded = false;
  }
}