How to Create Custom Select Boxes With CSS and JavaScript

As a web developer, you must have come across situations where you wanted to style the default select box, but the CSS styling options are limited.

In such scenarios, you can create custom select boxes using CSS and JavaScript. Custom select boxes provide a better user experience and can match the design of the rest of the website.

In this tutorial, we will see how to create custom select boxes with CSS and JavaScript.

HTML Markup

The HTML markup for the select box is straightforward. Create a div container and add a select element inside it. You can also add options to the select element.

<div class="custom-select">
  <select>
    <option value="">Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

CSS Styles

In the CSS styles, you can hide the default select box and create a custom one.

You can use the :before and :after pseudo-elements to create the custom select box.

The following styles hide the default select box and create a custom one:

.custom-select {
position: relative;
font-family: Arial;
}

.custom-select select {
display: none;
}

.custom-select:before {
content: "";
top: 6px;
right: 10px;
position: absolute;
border-color: #999 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
}

.custom-select:after {
content: attr(data-value);
padding: 8px 20px;
color: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
}

JavaScript Code

Finally, add the JavaScript code to open and close the custom select box and update the selected value.

var x, i, j, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < selElmnt.length; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTag
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s[i].innerHTML == this.innerHTML) {
s[i].classList.add("select-option-selected");
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("select-option-selected");
for (k = 0; k < y.length; k++) {
y[k].classList.remove("select-option-selected");
}
this.classList.add("select-option-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}

function closeAllSelect(elmnt) {
var x, y, i, arrNo = [];
x = 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 < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}

document.addEventListener("click", closeAllSelect);