CSS और JavaScript से कस्टम सेलेक्ट बॉक्स कैसे बनाएं?

कस्टम सेलेक्ट बॉक्स (ड्रॉपडाउन)

CSS और JavaScript से कस्टम सेलेक्ट बॉक्स बनाने का कोड - नेटिव <select> को छुपाकर कस्टम स्टाइल्ड वर्जन दिखाता है।

उदाहरण

<!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);
      color: #ffffff;
      padding: 8px 16px;
      border: 1px solid transparent;
      cursor: pointer;
      user-select: none;
    }
    .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>कस्टम सेलेक्ट उदाहरण</h1>
  <div class="customSelect" style="width:200px;">
    <select>
      <option value="0">जानवर चुनें:</option>
      <option value="Giraffe">जिराफ</option>
      <option value="Lion">शेर</option>
      <option value="Cow">गाय</option>
      <option value="Dog">कुत्ता</option>
      <option value="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>

आउटपुट

• प्रारंभ में: "जानवर चुनें:" दिखता है, ड्रॉपडाउन तीर के साथ
• क्लिक करने पर: ड्रॉपडाउन खुलता है, विकल्प दिखते हैं
• विकल्प चुनने पर: चयनित मान अपडेट होता है, ड्रॉपडाउन बंद होता है
• बाहर क्लिक करने पर: ड्रॉपडाउन बंद होता है

मुख्य तकनीकें

• नेटिव <select> छुपा रहता है (फॉर्म सबमिशन के लिए मान रखता है)
• कस्टम UI डायनामिकली बनाया जाता है (चयनित डिव + आइटम्स डिव)
• क्लिक आउटसाइड टू क्लोज पैटर्न
• तीर दिशा टॉगल (select-arrow-active)

आधुनिक विकल्प

• <select> को स्टाइल करना अब संभव है (appearance: none + कस्टम तीर)
• लाइब्रेरीज: Select2, Choices.js, Tom Select
• नेटिव <datalist> ऑटोकंप्लीट के लिए