//Custom made scrollable box with chekboxes

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

<style>
    .multiselect {
        width: 200px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #checkboxes {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes label {
        display: block;
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
    }
</style>

<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 checkbox</label>
            <label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
            <label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
        </div>
    </div>
</form>

<div class="example">
   <div style="height: 6em; width: 12em; overflow: auto;">
    <input id="3_cheese" type="checkbox" name="ingredients[]" value="Cheese" />
     <label for="3_cheese">Cheese</label>
    <br />
    <input id="3_olives" type="checkbox" name="ingredients[]" value="Olives" />
     <label for="3_olives">Olives</label>
    <br />
    <input id="3_pepperoni" type="checkbox" name="ingredients[]" value="Pepperoni" />
     <label for="3_pepperoni">Pepperoni</label>
    <br />
    <input id="3_anchovies" type="checkbox" name="ingredients[]" value="Anchovies" />
     <label for="3_anchovies">Anchovies</label>
    <br />
    <input id="3_mushrooms" type="checkbox" name="ingredients[]" value="Mushrooms" />
     <label for="3_mushrooms">Mushrooms</label>
    <br />
    <input id="3_green_pepper" type="checkbox" name="ingredients[]" value="Green Pepper" />
     <label for="3_green_pepper">Green Pepper</label>
    <br />
    <input id="3_bacon" type="checkbox" name="ingredients[]" value="Bacon" />
     <label for="3_bacon">Bacon</label>
    <br />
    <input id="3_ham" type="checkbox" name="ingredients[]" value="Ham" />
     <label for="3_ham">Ham</label>
   </div>
  </div>