JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

text before
<span class="taf-dropdown">
  <button role="button" type="button" data-toggle="dropdown" class="taf-dropdown-btn" >Action</button>
  <label>
    <input type="checkbox" class="taf-ddn-identifier">
    <ul role="menu" aria-labelledby="dropdownMenu" class="taf-ddn-ul">
      <li class="selected">Some action</li>
      <li>Action</li>
      <li>Another Action</li>
      <li>Something else here</li>
      <li>Separated link</li>
    </ul>
  </label>
</span>
text after<br/>mono mono mono mono mono mono

CSS

.taf-dropdown {
  position: relative;
  display: inline-block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.taf-dropdown > a, .taf-dropdown > button {
  font-size: 14px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 6px 20px 6px 10px;
  border-radius: 4px;
  display: inline-block;
  color: black;
  text-decoration: none;
}

.taf-dropdown > a:before, .taf-dropdown > button:before {
  position: absolute;
  right: 7px;
  top: 12px;
  content: ' ';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

.taf-dropdown input[type=checkbox] {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  opacity: 0;
}

.taf-dropdown input[type=checkbox]:checked {
  position: fixed;
  z-index:+0;
  top: 0px; left: 0px; 
  right: 0px; bottom: 0px;
}

.taf-dropdown ul {
  position: absolute;
  top: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  left: 0px;
  list-style: none;
  padding: 4px 0px;
  display: none;
  background-color: white;
  box-shadow: 0 3px 6px rgba(0,0,0,.175);
}

.taf-dropdown input[type=checkbox]:checked + ul {
  display: block;
}

.taf-dropdown ul li {
  display: block;
  padding: 6px 20px;
  white-space: nowrap;
  min-width: 100px;
}

.taf-dropdown ul li:hover, .selected {
  background-color: #F5F5F5;
  cursor: pointer;
}

.taf-dropdown ul li a {
  text-decoration: none;
  display: block;
  color: black
}

.taf-dropdown .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
  font-size: 1px;
  padding: 0;
}

JavaScript

function clearSelection(){
  document.querySelectorAll('.taf-dropdown .selected').forEach((a)=>{
    a.className='';
  });
}
document.querySelector('.taf-ddn-identifier').addEventListener("keydown", function (e) {
     if (e.keyCode == 13) { // enter
        if ($(".taf-ddn-ul").is(":visible")) {
            selectOption(e.currentTarget.parentElement.querySelector('.selected').innerText);
        } 
    }
    if (e.keyCode == 38) { // up
        var selected = document.querySelector('.selected');
        clearSelection();
        if (selected.previousElementSibling) {
            selected.previousElementSibling.className = 'selected';
        } else {
		        selected.parentElement.lastElementChild.className = 'selected';
        }
    }
    if (e.keyCode == 40) { // down
        var selected = document.querySelector('.selected');
        clearSelection();
        if (selected.nextElementSibling) {
            selected.nextElementSibling.className = 'selected';
        } else {
            selected.parentElement.firstElementChild.className = 'selected';
        }
    }
}, false);

document.querySelector('.taf-dropdown .taf-ddn-ul li').addEventListener("mouseover", function (e) {
        clearSelection();
        e.currentTarget.className = 'selected'
}, false);

document.querySelector('.taf-dropdown .taf-ddn-ul li').addEventListener("click", function (e) {
  document.querySelector('.taf-dropdown-btn').innerHTML = e.currentTarget.innerText;
}, false);

/* $(".taf-ddn-ul li").mouseover(function() {
    $(".taf-ddn-ul li").removeClass("selected");
    $(this).addClass("selected");
}).click(function() {
        document.querySelector('.taf-dropdown-btn').innerHTML = $(".selected").text();
}); */

function selectOption(val) {
  document.querySelector('.taf-dropdown-btn').innerHTML = val;
	document.querySelector('.taf-ddn-identifier').click();
}