<!-- 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>
.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;
}
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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.