CSSとJavaScriptを使用してカスタム選択ボックスを作成するにはどうすればよいですか？

CSSとJavaScriptを使用してカスタム選択ボックスを作成するためのコードは次のとおりです-

例

<!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>