eigenes-select-menue-eigenbau.php

Quell Code

<style>
  .wowSelect > input { width:200px; cursor:pointer; }
.wowSelect > .options {
  width:200px;
  margin:0;
  padding:0;
  list-style-type:none;
  opacity:0.01;
}

.wowSelect > .options > li {
  margin:2px 0;
  padding:5px;
  cursor:pointer;
  border:1px solid #ccc;
}

.wowSelect > .options > li:hover { background:#eee; }

.wowFader { animation:fadeInOptions 2s forwards; }

@keyframes fadeInOptions {
  from { opacity:0.01; }
  to { opacity:1.0; }
}
</style>
<form name="foo">
<div class="wowSelect">
  <input type="text" name="valbox" placeholder="click for wow">
  <ul class="options">
    <li>Apfel</li>
    <li>Banane</li>
    <li>Birne</li>
  </ul>
</div>
</form>
<script>
  
  var _wow = document.querySelector('.wowSelect > input[name="valbox"]');
var _wowOpts = document.querySelector('.wowSelect > .options');

// click event for animation
_wow.addEventListener(
    'click'
    , (e) => { _wowOpts.classList.add('wowFader'); }
  );

// click event for options
document.querySelectorAll('.wowSelect > .options > li').forEach(
    (e) => {
      e.addEventListener(
        'click', () => {
          _wow.value = e.innerText;
          _wowOpts.classList.remove('wowFader');
        }
      );
    }
  );

</script>