Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create custom select boxes with CSS and JavaScript?
A select box allows you to create a dropdown for users to select a specific value from a list. These generally appear when let’s say you want to a user to select a degree from a list of degrees, favourite sports from a list of popular sports, etc. Let us see how to create custom select boxes with CSS and JavaScript. The color of the select box, the appearance, etc. can be easily changed. Let us see how −
Create a container for the select box
First, create a container div for the select boxes. Option value 0 is where the select box value begins at the top −
<div class="customSelect" style="width:200px;">
<select>
<option value="0">Select Animal:</option>
<option value="Giraffe">Giraffe</option>
<option value="Lion">Lion</option>
<option value="Cow">Cow</option>
<option value="Dog">Dog</option>
<option value="Tiger">Tiger</option>
</select>
</div>
Position the select box
The select box is positioned using the position property with the value relative
.customSelect {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
Hide the select values initially
The select options are hidden when the web page loads. To hide the, the display property is et to none −
.customSelect select {
display: none;
}
The select box arrow
On a select box, an arrow pointing downwards let the users understand that this is a dropdown. To position that arrow. The position property with absolute value is set. The shape is set using the content property. To position it at the exact location, the top and right properties are considered −
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
The background color for the selected value
The background-color property is used to set the background color for the selected value −
.select-selected {
background-color: rgb(78, 11, 122);
}
Example
To create a custom select box with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<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>Custom Select Example</h1>
<div class="customSelect" style="width:200px;">
<select>
<option value="0">Select Animal:</option>
<option value="Giraffe">Giraffe</option>
<option value="Lion">Lion</option>
<option value="Cow">Cow</option>
<option value="Dog">Dog</option>
<option value="Tiger">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>
277 Views
