JSFiddle - React, Tailwind, and code Playground

by Harsha Vardhan Sannareddy

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form>
        <div class="multiselect">
            <div class="selectBox" onclick="showCheckboxes()">
                <select class="round">
                 <option>Select Measure</option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                <ul>
                    <li> <label>   <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
                    <li><label>   <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
                    <li><label>   <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
                    <li><label>   <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
                    <li> <label>   <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
                    <li><label>   <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
                </ul>
                <label> <input type="submit" class="submit round" value="APPLY"></label>
            </div>
        </div>
    </form>

    <button onclick="getvalues()"> Get Values </button>

CSS

.multiselect {
            width: 180px;
        }

        .selectBox {
            /* position: relative; */
            position: relative
        }

        .selectBox select {
            width: 100%;
            font-weight: bold;
        }

        .overSelect {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        #checkboxes {
            display: none;
            line-height: 0px;
            height: 100px;
            padding: 0px;
            border: 1px #dadada solid;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        #checkboxes::-webkit-scrollbar {
            width: 6px;
        }

        #checkboxes::-webkit-scrollbar-thumb {
            background-color: grey;
            outline: 1px solid slategrey;
            border-radius: 4px;
        }

        select {
            background-color: #e6e6e6;
            border: thin solid #e6e6e6;
            border-radius: 4px;
            display: inline-block;
            font: inherit;
            line-height: 1em;
            padding: 0.5em 3.5em 0.5em 1em;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 100%;
            cursor: pointer;
            outline: 0;
            color: #7b7b7b;
        }

        .selectBox:after {
            content: "\f13a";
            font-family: "FontAwesome";
            padding: 10px 0px 10px 2px;
            position: absolute;
            right: 10px;
            top: 0;
            color: #7b7b7b;
            font-size: 15px;
            z-index: 1;
            text-align: center;
            width: 10%;
            height: 100%;
            pointer-events: none;
            box-sizing: border-box;
        }

        label {
            cursor: pointer;
       ...

JavaScript

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

        function closebox() {
            var checkboxes = document.getElementById("checkboxes");
            $(checkboxes).delay(5000).fadeIn();
            checkboxes.style.display = "none";
        }

        function sleep(miliseconds) {
            var currentTime = new Date().getTime();
            while (currentTime + miliseconds >= new Date().getTime()) {}
        }

        function getvalues() {
            var str = '';
            var checks = document.getElementsByClassName('checks');
            for (i = 0; i < checks.length; i++) {
                if (checks[i].checked === true) {
                    str += checks[i].value + " ";
                }
            }
            alert(str);
        }

        function getvalue() {
            var str = '';
            var checks = document.getElementsByClassName('checks');
            alert(checks[0].checked);
        }