I am trying to have datalist list element always visible. As standard after focused lost, the arrow disappears.
I would like to have it always like this: Here is the plunker: https://plnkr.co/edit/?p=preview
ENVIRONMENT: Angular directive
Any ideas how to achieve it?
Best,
I have got the arrow always visible using css:
input::-webkit-calendar-picker-indicator {
opacity: 100;
}
<input list="browsers" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>