Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / Kurze-Scripte-und-Codeschnipsel / index.php

Zurück


Der Quellcode dazu


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<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>