/* The container must be positioned relative: */ .custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element: */ } .w-select-selected { background-color: DodgerBlue; } /* Style the arrow inside the select element: */ .w-select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /* Point the arrow upwards when the select box is open (active): */ .w-select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /* style the items (options), including the selected item: */ .w-select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; } /* Style items (options): */ .w-select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /* Hide the items when the select box is closed: */ .w-select-hide { display: none; } .w-select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } var x, i, j, l, ll, selElmnt, a, b, c; /* Look for any elements with the class "custom-select": */ x = document.getElementsByClassName("custom-select"); l = x.length; for (i = 0; i < l; i++) { selElmnt=x[i].getElementsByTagName("w-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", "w-select-selected" ); a.innerHTML=selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /* For each element, create a new DIV that will contain the option list: */ b=document.createElement("DIV"); b.setAttribute("class", "w-select-items select-hide" ); 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) { /* When an item is clicked, update the original select box, and the selected item: */ var y, i, k, s, h, sl, yl; s=this.parentNode.parentNode.getElementsByTagName("w-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; 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) { /* When the select box is clicked, close any other select boxes, and open/close the current select box: */ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("w-select-hide"); this.classList.toggle("w-select-arrow-active"); }); } function closeAllSelect(elmnt) { /* A function that will close all select boxes in the document, except the current select box: */ var x, y, i, xl, yl, arrNo=[]; x=document.getElementsByClassName("w-select-items"); y=document.getElementsByClassName("w-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("w-select-arrow-active"); } } for (i=0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("w-select-hide"); } } } /* If the user clicks anywhere outside the select box, then close all select boxes: */ document.addEventListener("click", closeAllSelect);