Custom select options box using JavaScript

HTML

CSS

Output

HTML

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <title>Custom select options box using JavaScript</title>

</head>

<body>
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="mainDiv" style="height: 100vh;display: flex;align-items: center;">
        <div class="container">
          <h1 class="selectBoxHeading">Custom select options box using JavaScript</h1>
          <div class="custom-select-box mt-3">
            <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>
      </div>
    </div>

</body>

</html>

CSS

body {
      overflow: hidden;
    }
    .selectBoxHeading {
      color: rgb(6, 2, 114);
      text-align: center;
    }
    /*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

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

Ui Code Snippets

Custom select options box using JavaScript

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Custom select options box using JavaScript

HTML

CSS

JS

Output

Network Marketing

SEO Course