Wie erstelle ich eine Datalist mit CSS, die so funktioniert wie datalist

Hallo, ich habe folgenden Code (paar Abschnitte, die nur für Verwirrung sorgen würden, habe ich herausgenommen) Code:
Es funktioniert alles, wie es soll. Das Problem ist, dass ich Angular verwende und irgendwie funktioniert der ClickListener auf den Optionen in der datalist nicht ganz. Deshalb würde ich gerne eine eigene datalist mithilfe von CSS programmieren, jedoch schaffe ich es nicht ganz, die datalist so zu gestalten wie die eigentliche (positionierung kriege ich nicht hin). Wie würde ich solch eine Datalist unter einem Input selber implementieren ohne zu verwenden?

Der hier verwendete Code

<html> <head> <style> *{ margin:0; padding:0; box-sizing:border-box; } h1{ font-size:29px; } body { background: dodgerblue linear-gradient(45deg, aqua, dodgerblue, deeppink) fixed; color: white; font: normal 32px/1.6 system-ui, sans-serif; text-shadow: 0 1px 1px hsl(0 0% 0% / 20%); margin: 3rem; } #datalist_helper{ width:300px; overflow:hidden; } #datalist_helper > input { cursor:pointer; } #datalist_helper > .options { list-style-type:none; opacity:0; margin: -1px 0 0 0; } #datalist_helper > .options > li, #datalist_helper input{ width:100%; padding:5px 0 0 10px; color:black; background:white; font-size:24px; height:45px; cursor:pointer; border:1px solid #ccc; } #datalist_helper > .options > li:hover { background:lightgreen; } .fader { animation:fadeInOptions 0.2s forwards; } @keyframes fadeInOptions { from { opacity:0; } to { opacity:1.0; } } </style> </head> <body> <h1>Data List eigenbau</h1> <div id="datalist_helper"> <input type="text" autocomplete="off"> <ul class="options"> <li>Apfel</li> <li>Banane</li> <li>Birne</li> </ul> </div> <script> var ul_list = document.querySelector('#datalist_helper > .options'); var inp = document.querySelector('#datalist_helper > input'); inp.addEventListener('click',function(e){ ul_list.classList.add('fader'); }); var lis=document.querySelectorAll('#datalist_helper > .options > li'); lis.forEach(function(e){ e.addEventListener('click', function(){ inp.value = e.innerText; ul_list.classList.remove('fader'); }); }); </script> </body </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!