How to make Datalist arrow to be always visible

Question

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

<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>

ENVIRONMENT: Angular directive

Any ideas how to achieve it?

Best,

Answer 1

The checked answer works only for Chrome.

For IE and Firefox, I found the answer here: https://stackoverflow.com/a/39555400/1937033

Answer 2

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>