<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.