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,

Is there a reason you're using a datalist element instead of a select? — JamieC, Feb 04 '16 at 09:35
Possible duplicate of [Is there a way to apply a CSS style on HTML5 datalist options?](http://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options) — JamieC, Feb 04 '16 at 09:38
Hi. The reason behind using datalist over select was to have an option to type text. any idea how can I do it with select? — amol01, Feb 04 '16 at 11:16
Browser-independent answer from here: https://stackoverflow.com/a/39555400/1937033 — ThePhi, Nov 05 '17 at 09:29
The dropdown arrow should be shown by default by all browsers, damn it. :) — Avatar, Mar 20 '21 at 13:24

score 38 · Accepted Answer · edited Mar 22 '16 at 19:47

38

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>

edited Mar 22 '16 at 19:47

James A Mohler

11,060
15
46
72

answered Feb 04 '16 at 11:19

amol01

1,823
4
21
35

How would I set that style using jQuery/Javascript? I'm in a situation where I don't have access to the css (easily). – abalter Apr 12 '16 at 19:38
Hi. I could not set it using jQuery. You may have a look here http://stackoverflow.com/questions/9438949/access-the-webkit-vendor-prefix-in-javascript – amol01 Apr 13 '16 at 08:20
6

@amol01 any idea for Mozilla users? Do you have any reference page for `::calendar-picker-indicator` or compatibility table you could link? Tks – 4lackof Sep 21 '16 at 05:02
No idea why datalist having its css to include 'calendar' :) – Nam G VU Jun 18 '22 at 04:46

How to make Datalist arrow to be always visible

1 Answers1

Linked