Custom select options box using javaScript

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
        href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Custom select options box using JavaScript</title>

</head>

<body>
    <div class="main-div">
        <h2 class="heading-para">Custom select options box using JavaScript</h2>

<label>Select Platform</label>
        <div class="custom-select-box">
            <select class="form-control">
                <option class="d-none">Select</option>
                <option value="1">Teknowize</option>
                <option value="2">W3School</option>
                <option value="3">Tutorial Point</option>
            </select>
        </div>
    </div>
</body>

</html>

CSS Copied

* {
            box-sizing: border-box;
            font-family: 'Fira Sans', sans-serif;
        }

body {
            display: grid;
            place-items: center;
            min-height: 100vh;
        }

.main-div {
            width: 100%;
            max-width: 375px;
        }

.heading-para {
            font-size: 20px;
            color: #060272;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-align: center;
        }

label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

/*the main selectbox must be relative:*/
        .custom-select-box {
            position: relative;
            border: 1.25px solid #DFDFDF;
            border-radius: 5px;
            color: #A9A9A9 !important;
        }

.custom-select-box select {
            display: none;
        }

.select-selected {
            border: 1.25px solid #DFDFDF;
            border-radius: 5px;
        }

/*Arrow Styling:*/
        .select-selected:after {
            position: absolute;
            content: url('https://www.teknowize.com/attachments/file_1659477036.svg');
            top: 50%;
            right: 23px;
            transform: translateY(-50%);
        }

/*style the options and selected item:*/
        .select-items div,
        .select-selected {
            color: #000000;
            padding: 8px 16px;
            border: none;
            background: #FFFFFF;
            cursor: pointer;
            user-select: none;
            font-size: 15px;
            font-weight: 500;
        }

/*style options*/
        .select-items {
            margin-top: 0.2rem;
            position: absolute !important;
            border: 1.25px solid #DFDFDF;
            border-radius: 5px;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 99;
            width: 100%;
        }

/*hide the items when the select box is closed:*/
        .select {
            display: none;
        }

.select-items div:hover,
        .same-as-selected {
            background: #F2F2F2;
        }

JS Copied

var x, i, j, l, ll, selElmnt, a, b, c;
        /*look for any elements with the class "custom-select-box":*/
        x = document.getElementsByClassName("custom-select-box");
        l = x.length;
        for (i = 0; i < l; i++) {
            selElmnt = x[i].getElementsByTagName("select")[0];
            ll = selElmnt.length;
            /*for each element, create a new DIV that will act as the selected item:*/
            a = document.createElement("DIV");
            a.setAttribute("class", "select-selected");
            a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
            x[i].appendChild(a);
            /*for each element create a new div to show list*/
            b = document.createElement("DIV");
            b.setAttribute("class", "select-items select");
            for (j = 1; j < ll; j++) {
                /*for each option in the original select element,
                create a new DIV that will act as an option item:*/
                c = document.createElement("DIV");
                c.innerHTML = selElmnt.options[j].innerHTML;
                c.addEventListener("click", function (e) {
                    /*update new list to select box after click*/
                    var y, i, k, s, h, sl, yl;
                    s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                    sl = s.length;
                    h = this.parentNode.previousSibling;
                    for (i = 0; i < sl; i++) {
                        if (s.options[i].innerHTML == this.innerHTML) {
                            s.selectedIndex = i;
                            h.innerHTML = this.innerHTML;
                            alert(h.innerHTML);
                            y = this.parentNode.getElementsByClassName("same-as-selected");
                            yl = y.length;
                            for (k = 0; k < yl; k++) {
                                y[k].removeAttribute("class");
                            }
                            this.setAttribute("class", "same-as-selected");
                            break;
                        }
                    }
                    h.click();
                });
                b.appendChild(c);
            }
            x[i].appendChild(b);
            a.addEventListener("click", function (e) {
                /*on click open close/open current box and close another box*/
                e.stopPropagation();
                closeAllSelect(this);
                this.nextSibling.classList.toggle("select");
                this.classList.toggle("select-arrow-active");
            });
        }
        function closeAllSelect(elmnt) {
            /*close all select box except selected box*/
            var x, y, i, xl, yl, arrNo = [];
            x = document.getElementsByClassName("select-items");
            y = document.getElementsByClassName("select-selected");
            xl = x.length;
            yl = y.length;
            for (i = 0; i < yl; i++) {
                if (elmnt == y[i]) {
                    arrNo.push(i)
                } else {
                    y[i].classList.remove("select-arrow-active");
                }
            }
            for (i = 0; i < xl; i++) {
                if (arrNo.indexOf(i)) {
                    x[i].classList.add("select");
                }
            }
        }
        /*on click outside of select box*/
        document.addEventListener("click", closeAllSelect);