Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create custom select boxes with CSS and JavaScript?
A custom select box allows you to create a dropdown with complete control over its appearance and behavior. Unlike default HTML select elements, custom select boxes can be styled with any colors, fonts, and animations you want. Let's see how to create custom select boxes using CSS and JavaScript.
Syntax
.custom-select {
position: relative;
/* Other styling properties */
}
.custom-select select {
display: none; /* Hide default select */
}
Basic HTML Structure
First, create a container div with a standard HTML select element inside. The select element will be hidden and replaced with custom styling −
<div class="custom-select">
<select>
<option value="0">Select Animal:</option>
<option value="lion">Lion</option>
<option value="tiger">Tiger</option>
</select>
</div>
CSS Styling
The CSS creates the visual appearance by positioning elements and styling the dropdown arrow −
.custom-select {
position: relative;
font-family: Arial, sans-serif;
}
.custom-select select {
display: none; /* Hide default select */
}
.select-selected {
background-color: #4a5568;
color: white;
padding: 8px 16px;
cursor: pointer;
}
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
Complete Example
Here's a complete working example of a custom select box −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-select {
position: relative;
font-family: Arial, sans-serif;
width: 200px;
margin: 20px;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #4a5568;
color: white;
padding: 10px 16px;
border: none;
cursor: pointer;
border-radius: 4px;
position: relative;
}
.select-selected:after {
position: absolute;
content: "";
top: 15px;
right: 12px;
width: 0;
height: 0;
border: 5px solid transparent;
border-color: #fff transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 10px;
}
.select-items {
position: absolute;
background-color: #2d3748;
top: 100%;
left: 0;
right: 0;
z-index: 99;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.select-items div {
color: white;
padding: 10px 16px;
cursor: pointer;
border-bottom: 1px solid #4a5568;
}
.select-items div:hover,
.same-selected {
background-color: #4a5568;
}
.select-hide {
display: none;
}
</style>
</head>
<body>
<h2>Custom Select Box Example</h2>
<div class="custom-select">
<select>
<option value="0">Select Animal:</option>
<option value="lion">Lion</option>
<option value="tiger">Tiger</option>
<option value="elephant">Elephant</option>
<option value="giraffe">Giraffe</option>
</select>
</div>
<script>
function createCustomSelect() {
const customSelect = document.querySelector('.custom-select');
const selectElement = customSelect.querySelector('select');
// Create the selected display div
const selectedDiv = document.createElement('div');
selectedDiv.className = 'select-selected';
selectedDiv.innerHTML = selectElement.options[0].innerHTML;
customSelect.appendChild(selectedDiv);
// Create the options container
const optionsDiv = document.createElement('div');
optionsDiv.className = 'select-items select-hide';
// Create option divs
for (let i = 1; i < selectElement.options.length; i++) {
const optionDiv = document.createElement('div');
optionDiv.innerHTML = selectElement.options[i].innerHTML;
optionDiv.addEventListener('click', function() {
selectElement.selectedIndex = i;
selectedDiv.innerHTML = this.innerHTML;
optionsDiv.classList.add('select-hide');
selectedDiv.classList.remove('select-arrow-active');
});
optionsDiv.appendChild(optionDiv);
}
customSelect.appendChild(optionsDiv);
// Toggle dropdown
selectedDiv.addEventListener('click', function() {
optionsDiv.classList.toggle('select-hide');
this.classList.toggle('select-arrow-active');
});
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
if (!customSelect.contains(e.target)) {
optionsDiv.classList.add('select-hide');
selectedDiv.classList.remove('select-arrow-active');
}
});
}
// Initialize custom select
createCustomSelect();
</script>
</body>
</html>
A dark gray custom select box with "Select Animal:" as placeholder text and a white dropdown arrow appears. Clicking it reveals a dropdown list with animal options (Lion, Tiger, Elephant, Giraffe) that can be selected. The selected option updates the display text.
Key Components
| Component | Purpose |
|---|---|
.custom-select |
Container with relative positioning |
.select-selected |
Displays the currently selected option |
.select-items |
Contains the dropdown options |
:after pseudo-element |
Creates the dropdown arrow |
Conclusion
Custom select boxes provide complete control over styling and user experience. By hiding the default select element and creating custom HTML/CSS components with JavaScript functionality, you can achieve any design while maintaining accessibility and form submission compatibility.
Updated on: 2026-03-15T14:40:45+05:30
702 Views
Advertisements