How to create custom select boxes with CSS and JavaScript?

CSS Web Development Front End Technology Javascript

To create custom select boxes with CSS and JavaScript, the code is as follows −

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
   .customSelect {
      position: relative;
      font-family: Arial, Helvetica, sans-serif;
   }
   .customSelect select {
      display: none;
   }
   .select-selected {
      background-color: rgb(78, 11, 122);
   }
   .select-selected:after {
      position: absolute;
      content: "";
      top: 14px;
      right: 10px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-color: #fff transparent transparent transparent;
   }
   .select-selected.select-arrow-active:after {
      border-color: transparent transparent #fff transparent;
      top: 7px;
   }
   .select-items div, .select-selected {
      color: #ffffff;
      padding: 8px 16px;
      border: 1px solid transparent;
      cursor: pointer;
      user-select: none;
   }
   .select-items {
      position: absolute;
      background-color: rgb(138, 29, 148);
      top: 100%;
      left: 0;
      right: 0;
      z-index: 99;
   }
   .select-hide {
      display: none;
   }
   .select-items div:hover, .sameSelected {
      background-color: rgba(0, 0, 0, 0.1);
   }
</style>
</head>
<body>
<h1>Custom Select Example</h1>
<div class="customSelect" style="width:200px;">
<select>
<option value="0">Select Animal:</option>
<option value="Giraffe">Giraffe</option>
<option value="Lion">Lion</option>
<option value="Cow">Cow</option>
<option value="Dog">Dog</option>
<option value="Tiger">Tiger</option>
</select>
</div>
<script>
   var customSelectEle, i, j, selElmnt, divEle, divEleSelected, c;
   customSelectEle = document.querySelector(".customSelect");
   selElmnt = customSelectEle.getElementsByTagName("select")[0];
   divEle = document.createElement("DIV");
   divEle.setAttribute("class", "select-selected");
   divEle.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
   customSelectEle.appendChild(divEle);
   divEleSelected = document.createElement("DIV");
   divEleSelected.setAttribute("class", "select-items select-hide");
   Array.from(selElmnt).forEach((item, index) => {
      c = document.createElement("DIV");
      c.innerHTML = selElmnt.options[index].innerHTML;
      c.addEventListener("click", function(e) {
         var y, i, k, selEleParent, selEleSibling;
         selEleParent = this.parentNode.parentNode.getElementsByTagName( "select" )[0];
         selEleSibling = this.parentNode.previousSibling;
         for (i = 0; i < selEleParent.length; i++) {
            if (selEleParent.options[i].innerHTML == this.innerHTML) {
               selEleParent.selectedIndex = i;
               selEleSibling.innerHTML = this.innerHTML;
               y = this.parentNode.getElementsByClassName("sameSelected");
               for (k = 0; k < y.length; k++) {
                  y[k].removeAttribute("class");
               }
               this.setAttribute("class", "sameSelected");
               break;
            }
         }
         selEleSibling.click();
      });
      divEleSelected.appendChild(c);
   });
   customSelectEle.appendChild(divEleSelected);
   divEle.addEventListener("click", function(e) {
      e.stopPropagation();
      closeSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
   });
   function closeSelect(elmnt) {
      var customSelectEle,
      y,
      i,
      arrNo = [];
      customSelectEle = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      for (i = 0; i < y.length; i++) {
         if (elmnt == y[i]) {
            arrNo.push(i);
         }
         else {
            y[i].classList.remove("select-arrow-active");
         }
      }
      for (i = 0; i < customSelectEle.length; i++) {
         if (arrNo.indexOf(i)) {
            customSelectEle[i].classList.add("select-hide");
         }
      }
   }
   document.addEventListener("click", closeSelect);
</script>
</body>
</html>