<form class="csb-recent" role="search" autocomplete="off">
  <label class="csb-sr" for="csb-recent-i">Search</label>
  <input
    id="csb-recent-i"
    type="search"
    name="q"
    placeholder="Search history..."
    aria-controls="csb-recent-list"
    aria-expanded="false"
  />
  <div id="csb-recent-list" class="csb-recent-list" role="listbox" hidden>
    <div class="csb-recent-head">
      <span>Recent</span>
      <button type="button" class="csb-recent-clear">Clear all</button>
    </div>
    <button type="button" role="option">flexbox layouts</button>
    <button type="button" role="option">aurora gradient</button>
    <button type="button" role="option">accessible modal</button>
  </div>
</form>

.csb-recent { position: relative; display: inline-block; }
.csb-recent input {
  width: 260px; padding: 10px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
}
.csb-recent input::placeholder { color: #b8b6d4; }
.csb-recent input:focus { border-color: #7c6cff; }
.csb-recent input[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.csb-recent-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #1a1a28;
  border: 1px solid #7c6cff; border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 6px;
  z-index: 10;
}
.csb-recent-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #b8b6d4;
}
.csb-recent-clear {
  border: 0; background: transparent;
  color: #ff6c8a; cursor: pointer;
  font: 600 10px/1 'JetBrains Mono', monospace;
}
.csb-recent-list [role="option"] {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px;
  border: 0; cursor: pointer;
  background: transparent;
  color: #cbd5e1; font: 500 13px/1 system-ui, sans-serif;
  border-radius: 6px;
}
.csb-recent-list [role="option"]:hover { background: rgba(124,108,255,0.12); color: #fff; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

document.querySelectorAll('.csb-recent').forEach(function(form) {
  var input = form.querySelector('input');
  var list  = form.querySelector('.csb-recent-list');
  function open()  { list.hidden = false; input.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  input.setAttribute('aria-expanded', 'false'); }
  input.addEventListener('focus', open);
  input.addEventListener('blur', function() { setTimeout(close, 150); });
  list.addEventListener('mousedown', function(e) {
    var btn = e.target.closest('[role="option"]');
    if (btn) { input.value = btn.textContent; close(); }
  });
  var clear = form.querySelector('.csb-recent-clear');
  if (clear) clear.addEventListener('click', function() {
    form.querySelectorAll('[role="option"]').forEach(function(b){ b.remove(); });
  });
});