<!-- Article: https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/ -->
<h1 class="title">Custom Select (not accessible)</h1>
<!-- DO NOT USE this into production. It's a poor custom select -->
<div class="card">
<p class="p">You can select an option using the mouse or touch, but it's impossible using a keyboard.
<p>
<div class="select">
<span class="selectLabel">Main job role</span>
<div class="selectWrapper">
<div class="selectCustom js-selectCustom">
<div class="selectCustom-trigger">Select role...</div>
<div class="selectCustom-options">
<div class="selectCustom-option" data-value="ds">UI/UX Designer</div>
<div class="selectCustom-option" data-value="fe">Frontend Engineer</div>
<div class="selectCustom-option" data-value="be">Backend Engineer</div>
<div class="selectCustom-option" data-value="qa">QA Engineer</div>
<div class="selectCustom-option" data-value="un">Unicorn</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>Made without coffee by <a href="https://twitter.com/a_sandrina_p" class="link">Sandrina Pereira</a>. Would you <a href="https://www.buymeacoffee.com/sandrinap" target="_blank" class="link">buy me one</a>?</p>
</footer>
.select {
position: relative;
}
.selectLabel {
display: block;
font-weight: bold;
margin-bottom: 0.4rem;
}
.selectWrapper {
position: relative;
}
.selectCustom {
position: relative;
width: 22rem;
height: 4rem;
}
.selectCustom-trigger {
font-size: 1.6rem;
background-color: #fff;
border: 1px solid #6f6f6f;
border-radius: 0.4rem;
cursor: pointer;
}
.selectCustom-trigger {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
padding: 0.7rem 0.8rem;
}
.selectCustom-trigger::after {
content: "▾";
position: absolute;
top: 0;
line-height: 3.8rem;
right: 0.8rem;
}
.selectCustom-trigger:hover {
border-color: #8c00ff;
}
.selectCustom-options {
position: absolute;
top: calc(3.8rem + 0.8rem);
left: 0;
width: 100%;
border: 1px solid #6f6f6f;
border-radius: 0.4rem;
background-color: #fff;
box-shadow: 0 0 4px #e9e1f8;
z-index: 1;
padding: 0.8rem 0;
display: none;
}
.selectCustom.isActive .selectCustom-options {
display: block;
}
.selectCustom-option {
position: relative;
padding: 0.8rem;
}
.selectCustom-option:hover {
background-color: #f7ecff;
}
.selectCustom-option:not(:last-of-type)::after {
content: "";
position: absolute;
bottom: 0;
left: 0.8rem;
width: calc(100% - 1.6rem);
border-bottom: 1px solid #d3d3d3;
}
// ----- Theme styles -----
html {
font-size: 62.5%;
}
body {
background: #f8f3ef;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
color: #343434;
line-height: 1.5;
font-size: 1.6rem;
}
body * {
box-sizing: inherit;
}
.p {
margin-bottom: 1rem;
}
strong {
font-weight: 600;
}
.title {
font-size: 2rem;
font-weight: 600;
margin: 1.6rem;
line-height: 1.2;
text-align: center;
}
.card {
position: relative;
margin: 2rem auto;
max-width: calc(100% - 2rem);
width: 40rem;
background: white;
padding: 3rem;
box-shadow: 0.2rem 0.2rem #e9e1f8;
}
.footer {
position: relative;
width: 100%;
margin-top: 60px;
padding: 24px 16px;
text-align: center;
font-size: 1.4rem;
background: white;
@media screen and (min-height: 26em) {
position: fixed;
left: 0;
bottom: 0;
}
}
View Compiled
const elSelectCustom = document.getElementsByClassName("js-selectCustom")[0];
const elSelectCustomValue = elSelectCustom.children[0];
const elSelectCustomOptions = elSelectCustom.children[1];
const defaultLabel = elSelectCustomValue.getAttribute("data-value");
// Listen for each custom option click
Array.from(elSelectCustomOptions.children).forEach(function (elOption) {
elOption.addEventListener("click", (e) => {
// Update custom select text too
elSelectCustomValue.textContent = e.target.textContent;
// Close select
elSelectCustom.classList.remove("isActive");
});
});
// Toggle select on label click
elSelectCustomValue.addEventListener("click", (e) => {
elSelectCustom.classList.toggle("isActive");
});
// close the custom select when clicking outside.
document.addEventListener("click", (e) => {
const didClickedOutside = !elSelectCustom.contains(event.target);
if (didClickedOutside) {
elSelectCustom.classList.remove("isActive");
}
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.