<div class="select-wrapper">
<div class="select-btn">
<span class="btn-text">Select an option</span>
<svg class="arrow-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
</div>
<ul class="list-items">
<li class="item">
<span class="item-text">Google Chrome</span>
</li>
<li class="item">
<span class="item-text">Mozilla Firefox</span>
</li>
<li class="item">
<span class="item-text">Safari</span>
</li>
<li class="item">
<span class="item-text">Microsoft Edge</span>
</li>
</ul>
</div>
* {
box-sizing: border-box;
}
.select-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: relative;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
.select-btn {
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-radius: 8px;
cursor: pointer;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
transition: border-color 0.3s;
}
.select-btn:hover {
border-color: #3b82f6;
}
.btn-text {
font-size: 1rem;
font-weight: 500;
color: #333;
}
.arrow-icon {
transition: transform 0.3s ease;
color: #6b7280;
}
.select-wrapper.open .arrow-icon {
transform: rotate(180deg);
}
.list-items {
position: absolute;
top: 40px;
width: 100%;
border-radius: 8px;
padding: 10px;
background-color: #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
display: none;
z-index: 10;
border: 1px solid #e5e7eb;
}
.select-wrapper.open .list-items {
display: block;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.item {
display: flex;
align-items: center;
list-style: none;
height: 40px;
cursor: pointer;
transition: 0.3s;
padding: 0 15px;
border-radius: 8px;
}
.item:hover {
background-color: #eff6ff;
color: #2563eb;
}
const selectBtn = document.querySelector(".select-btn");
const items = document.querySelectorAll(".item");
const wrapper = document.querySelector(".select-wrapper");
const btnText = document.querySelector(".btn-text");
selectBtn.addEventListener("click", () => {
wrapper.classList.toggle("open");
});
items.forEach(item => {
item.addEventListener("click", () => {
items.forEach(i => i.classList.remove("checked"));
item.classList.add("checked");
btnText.innerText = item.querySelector(".item-text").innerText;
wrapper.classList.remove("open");
});
});
// Close dropdown when clicking outside
document.addEventListener("click", (e) => {
if (!wrapper.contains(e.target)) {
wrapper.classList.remove("open");
}
});
