Hey

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom &lt;select&gt; example</title>
<style>
body {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: '↓';
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  position: relative;
}

html body form fieldset#custom div.select div.header::after {
  content: '↓';
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: .5em;
}

html body form fieldset#custom div.select div.header:hover:after {
  background-color: blue;
}

.select .header select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select datalist div.option:focus {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.option[data-disabled] {
  color: gray;
}

html body form fieldset#custom div.select div.optgroup div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: .25em;
}

html body form fieldset#custom div.select div.header {
  flex: 1;
  display: flex;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: .5em;
}
</style>

          } else {
              const open = this.hasAttribute("data-open");
              e.stopPropagation();
              if (open) {
                  this.removeAttribute("data-open");
              } else {
                  this.setAttribute("data-open", "");
              }
          }
      };
      div.onkeyup = function(event) {
          event.preventDefault();
          if (event.keyCode === 13) {
              this.click();
          }
      };
      document.addEventListener('click', function(e) {
          if (div.hasAttribute("data-open")) div.removeAttribute("data-open");
      });
      const width = Math.max(...Array.from(options).map(function(e) {
          span.innerText = e.label;
          return div.offsetWidth;
      }));
      console.log(width)
      div.style.width = width + 'px';
  }
  document.forms[0].onsubmit = function(e) {
      const data = new FormData(this);
      e.preventDefault();
      submit.innerText = JSON.stringify([...data.entries()]);
  }
  </script>