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>কাস্টম সিলেক্ট উদাহরণ</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>
আউটপুট
উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:
সিলেক্ট মেনুতে ক্লিক করলে মেনু নিচের মত খুলবে:
