How to make default datalist tag selector visible in html5?

Question

I would like to show the dropdown arrow datalist always, and not just when you mouse over it. I tried:

input::-webkit-calendar-picker-indicator {
    display: visible;
}

it doesn't work .. ideas? thanks in advance for the answers !! :)

Answer 1

Opacity should do the trick

 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>

Run codeHide result