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>

    <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>

</span>
text after<br/>mono mono mono mono mono mono

<span class="taf-dropdown">
  <button role="button" type="button" data-toggle="dropdown" class="taf-dropdown-btn" >Action</button>

    <input type="checkbox" class="taf-ddn-identifier">
    <ul role="menu" aria-labelledby="dropdownMenu" class="taf-ddn-ul">
      <li class="selected">Lion</li>
      <li>Tiger</li>
      <li>Jaguar</li>
      <li>Cheeta</li>
      <li>Puma</li>
    </ul>

</span>

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(dom){
  dom.currentTarget.parentElement.querySelectorAll('.taf-dropdown .selected').forEach((a)=>{
    a.className='';
  });
}
document.querySelectorAll('.taf-ddn-identifier').forEach((a)=>{

a.addEventListener("keydown", function (e) {
     if (e.keyCode == 13) { // enter
        if (e.currentTarget.parentElement.querySelector('.taf-ddn-identifier').checked) {
            selectOption(e, e.currentTarget.parentElement.querySelector('.selected').innerText);
        } 
    }
    if (e.keyCode == 38) { // up
        var selected = e.currentTarget.parentElement.querySelector('.selected');
        clearSelection(e);
        if (selected.previousElementSibling) {
            selected.previousElementSibling.className = 'selected';
        } else {
		        selected.parentElement.lastElementChild.className = 'selected';
        }
    }
    if (e.keyCode == 40) { // down
        var selected = e.currentTarget.parentElement.querySelector('.selected');
        clearSelection(e);
        if (selected.nextElementSibling) {
            selected.nextElementSibling.className = 'selected';
        } else {
            selected.parentElement.firstElementChild.className = 'selected';
        }
    }
}, false);
});

document.querySelectorAll('.taf-dropdown .taf-ddn-ul li').forEach((a)=>{
	a.addEventListener("mouseover", function (e) {
        clearSelection(e);
        e.currentTarget.className = 'selected'
}, false);
a.addEventListener("click", function (e) {
e.currentTarget.parentElement.parentElement.querySelector('.taf-dropdown-btn').innerHTML = e.currentTarget.innerText;

e.currentTarget.parentElement.parentElement.querySelector('.taf-ddn-identifier').click();
}, false);
})


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