<details class="custom__select" id="js__custom__select" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-owns="a11y__select">
<summary id="custom__select__status" aria-live="polite" aria-controls="a11y__select">Choose your love language</summary>
<ul class="select" role="listbox" aria-expanded="false" id="a11y__select">
<li class="active option" role="option" aria-selected="true">CSS</li>
<li class="option" role="option" tabindex="-1">HTML</li>
<li class="option" role="option" tabindex="-1">JavaScript</li>
<li class="option" role="option" tabindex="-1">React</li>
<li class="option" role="option" tabindex="-1">Vue</li>
</ul>
</details>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #291642;
font-family: "Gochi Hand", sans-serif;
color: #fff;
font-size: 130%;
letter-spacing: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
min-height: 100vh;
}
.custom__select {
display: flex;
border: 1px solid #c5c5c5;
border-radius: 3px;
position: relative;
color: #454545;
min-width: 400px;
&[open] {
border-radius: 3px 3px 0 0;
summary::after {
content: "\002039";
}
}
summary {
cursor: pointer;
padding: 10px 48px 10px 12px;
background: #f6f6f6;
list-style: none;
display: flex;
align-items: center;
line-height: 1;
&::after {
font-size: 46px;
content: "\00203A";
position: absolute;
right: 12px;
top: calc(50%);
transform: translateY(-50%) rotate(90deg);
pointer-events: none;
}
&::-webkit-details-marker {
display: none;
}
}
&:hover {
background: #ededed;
}
}
.select {
position: absolute;
display: flex;
flex-direction: column;
border: 1px solid #c5c5c5;
width: calc(100% + 2px);
left: -1px;
border-radius: 0 0 3px 3px;
background: #fff;
list-style: none outside none;
li {
cursor: pointer;
padding: 6px 12px;
list-style: none outside none;
&:hover,
&.active {
background: #007fff;
color: #fff;
}
}
&:hover li.active {
background: #007fff;
color: #fff;
}
}
View Compiled
const combox = document.getElementById("js__custom__select");
const options = document.querySelectorAll(".option");
const comboxVal = document.getElementById("custom__select__status");
combox.addEventListener("toggle", function() {
if (combox.open) return;
});
combox.addEventListener("focusout", e => {
if (this.mouseDown) return;
combox.removeAttribute("open");
});
for (const option of options) {
option.addEventListener("click", function() {
if (!this.classList.contains("active")) {
this.parentNode
.querySelector(".option.active")
.classList.remove("active");
this.classList.add("active");
comboxVal.textContent = this.textContent;
}
});
option.addEventListener("mousedown", () => {
this.mouseDown = true;
});
option.addEventListener("mouseup", () => {
this.mouseDown = false;
combox.removeAttribute("open");
});
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.