title: How to make Datalist arrow to be always visible
body: <p>I am trying to have datalist list element always visible. As standard after focused lost, the arrow disappears. </p>
  
  <p>I would like to have it always like this: 
  Here is the plunker: <a href="https://plnkr.co/edit/?p=preview" rel="noreferrer">https://plnkr.co/edit/?p=preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input list="browsers" name="myBrowser" /&gt;
  &lt;datalist id="browsers"&gt;
    &lt;option value="Chrome"&gt;
    &lt;option value="Firefox"&gt;
    &lt;option value="Internet Explorer"&gt;
    &lt;option value="Opera"&gt;
    &lt;option value="Safari"&gt;
  &lt;/datalist&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/ZTOWO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZTOWO.png" alt="enter image description here"></a></p>
  
  <p>ENVIRONMENT: Angular directive</p>
  
  <p>Any ideas how to achieve it? </p>
  
  <p>Best,</p>