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
Kommentar abgeben zu diesen Beitrag/Code ?<div class="input-wrapper"><input type="text" list="diagnose-list" placeholder="Suchen..."><datalist id="diagnose-list"><option></option></datalist><div class="btn searchBtn"><i class="fas fa-search"></i></div></div>
Dann hier klicken
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;