JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<!-- foreach as item -->
<div id="select-container">
  <div id="_select" data-open="false">
  Välj
    <span class="_option" data-id="@item.id">@item.name1</span>
    <span class="_option" data-id="@item.id">@item.name2323</span>
    <span class="_option" data-id="@item.id">@item.name3333</span>
    <span class="_option" data-id="@item.id">@item.name44</span>
  </div>
</div>

CSS

/* Container */
#select-container {
  background: white;
  width: 250px;
  height: 32px;
  padding: 4px 0px 0px 8px;
  font-size: 24px;
  border: 1px solid black;
}

/* Each option */
._option {
  background: white;
  width: 250px;
  height: 32px;
  padding: 4px 0px 0px 8px;
  margin: 0px 0px 0px -9px;
  font-size: 24px;
  border: 1px solid black;
}

._option:hover {
  background: red;
}

._option:nth-child(1) {
  margin-top: 6px;
}

/* Arrows */
#_select[data-open='false']::before {
  content: '> ';
  float: right;
}

#_select[data-open='true']::before {
  content: 'v ';
  float: right;
}

/* Show hide */
#_select ._option {
  opacity: 0;
  transition: all 0.3s;
  display: block;
}

#_select[data-open='true'] ._option {
  opacity: 1;
  transition: all 0.3s;
  display: block;
}

JavaScript

const select = document.querySelector("#_select");
// Update visible or not
select.addEventListener("click", function(e) { this.dataset.open = this.dataset.open === "true" ? "false" : "true"; });