Select Custom

SelectCustom.js

import { forEach } from "./utils/pollyfills";

export default function SelectCustom() {

  let selects = document.querySelectorAll(".select-custom");

  forEach(selects, selectsSet);

  function selectsSet(select) {

    // Creating the custom select

    let selectInput = select.querySelector("select")
    let options = selectInput.querySelectorAll('option');

    let label = document.createElement("div");
    label.classList.add("select-custom__label");
    label.appendChild(document.createTextNode(options[0].textContent));
    select.appendChild(label);

    var optionsContainer = document.createElement("div");
    optionsContainer.classList.add("select-custom__options");

    let frag = document.createDocumentFragment();
    forEach(options, function (option) {
      let optionEl = document.createElement("div");
      optionEl.classList.add("option");
      optionEl.appendChild(document.createTextNode(option.textContent));
      optionEl.setAttribute("value", option.value);
      frag.append(optionEl);
    });

    optionsContainer.append(frag);
    select.appendChild(optionsContainer);


    // Adding events to custom select

    let customOptions = optionsContainer.querySelectorAll('.option');

    forEach(customOptions, optionsSet);

    function optionsSet(option) {
      option.addEventListener('click', function (event) {
        event.stopPropagation();
        selectInput.value = option.getAttribute("value");
        label.textContent = option.textContent;

        hideOptions()
      });
    }

    select.addEventListener("click", () => {
      optionsContainer.style.opacity = 1;
      optionsContainer.style.zIndex = 1;
      select.style.overflow = "visible";
    });

    document.addEventListener("click", function (event) {
      // If user clicks inside the element, do nothing
      if (event.target.closest(".select-custom")) return;

      hideOptions();
    });

    function hideOptions() {
      optionsContainer.style.opacity = 0;
      optionsContainer.style.zIndex = -1;
      select.style.overflow = "hidden";
    }
  }

}

snippet.pug

.select-custom
  select
    option(value="2019") 2019
    option(value="2020") 2020
    option(value="2021") 2021		

style.scss

.select-custom {
  position: relative;
  width: auto;
  height: 25px;
  margin-bottom: 20px;
  cursor: pointer;

  select {
    display: none;
  }

  .select-custom__label {
    padding-right: 20px;
    height: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #2e343c;
    background-color: transparent;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      top: 5px;
      right: 6px;
      display: inline-block;
      width: 0;
      height: 0;
      vertical-align: middle;
      color: #fff;
      border-top: 6px dashed;
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
    }
  }

  .select-custom__options {
    padding: 8px 0;
    background: white;
    border-radius: 4px;
    position: relative;
    z-index: -1;
    opacity: 0;

    .option {
      font-size: 14px;
      line-height: 1.2;
      padding: 4px 20px;
      background-color: white;
      color: $background-color;
      cursor: pointer;

      &:hover {
        background-color: #d3dbe1;
      }
    }
  }
}