Mon - Sun 8.00 AM - 8.00 PM
[email protected]
Home
Articles
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Our Tutorials
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Vue JS
Android
Ui Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Login Form
Modals
OTP Verification Form
Popular Notes
HTML
CSS
JavaScript
SQL
Services
About
Contact Us
Ui Code
Snippets
Custom select options box using JavaScript
HTML
CSS
JS
Output
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap 5 CDN and css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- google font and font awesome CDN --> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Custom select options box using JavaScript</title> </head> <body> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="mainDiv" style="height: 100vh;display: flex;align-items: center;"> <div class="container"> <h1 class="selectBoxHeading">Custom select options box using JavaScript</h1> <div class="custom-select-box mt-3"> <select class="form-control"> <option class="d-none">Select</option> <option value="1">Teknowize</option> <option value="2">W3School</option> <option value="3">Tutorial Point</option> </select> </div> </div> </div> </div> </body> </html>
CSS
body { overflow: hidden; } .selectBoxHeading { color: rgb(6, 2, 114); text-align: center; } /*the main selectbox must be relative:*/ .custom-select-box { position: relative; border: 1.25px solid #DFDFDF; border-radius: 5px; color: #A9A9A9 !important; } .custom-select-box select { display: none; } .select-selected { border: 1.25px solid #DFDFDF; border-radius: 5px; } /*Arrow Styling:*/ .select-selected:after { position: absolute; content: url('https://www.teknowize.com/attachments/file_1659477036.svg'); top: 50%; right: 23px; transform: translateY(-50%); } /*style the options and selected item:*/ .select-items div, .select-selected { color: #000000; padding: 8px 16px; border: none; background: #FFFFFF; cursor: pointer; user-select: none; font-size: 15px; font-weight: 500; } /*style options*/ .select-items { margin-top: 0.2rem; position: absolute !important; border: 1.25px solid #DFDFDF; border-radius: 5px; top: 100%; left: 0; right: 0; z-index: 99; width: 100%; } /*hide the items when the select box is closed:*/ .select { display: none; } .select-items div:hover, .same-as-selected { background: #F2F2F2; }
JS
var x, i, j, l, ll, selElmnt, a, b, c; /*look for any elements with the class "custom-select-box":*/ x = document.getElementsByClassName("custom-select-box"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("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", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element create a new div to show list*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select"); 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) { /*update new list to select box after click*/ var y, i, k, s, h, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("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; alert(h.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) { /*on click open close/open current box and close another box*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*close all select box except selected box*/ var x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("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("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select"); } } } /*on click outside of select box*/ document.addEventListener("click", closeAllSelect);
Output