JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<div class="select">
  <div class="text">sdfsdfdsfsdfsdf</div>
  <select name="" id="a">
    <option value="1">sdfsdfdsfsdfsdf</option>
    <option value="2">safasf</option>
    <option value="3">asfasfas</option>
  </select>
</div>

CSS

select {
  outline:none;
}
.select {
  position: relative;
  display: inline-block;
  border: 1px solid #ddd;
}
.select .text {
  background: #fff;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  font-size: 14px;
}
.select select {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  opacity: 0;
}

JavaScript

var s = document.getElementById('a')
a.addEventListener('change', function(){
	this.previousElementSibling.innerHTML = this.options[this.selectedIndex].text;
})