如何使 Datalist 箭头始终可见答案

【问题标题】：How to make Datalist arrow to be always visible如何使 Datalist 箭头始终可见
【发布时间】：2017-11-05 17:31:29
【问题描述】：

我试图让 datalist 列表元素始终可见。按照标准，在聚焦丢失后，箭头会消失。

我希望它总是这样：这是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>

环境：角度指令

任何想法如何实现它？

最好的，

【问题讨论】：

您使用 datalist 元素而不是 select 是否有原因？
Is there a way to apply a CSS style on HTML5 datalist options?的可能重复
嗨。使用 datalist 而不是 select 的原因是有一个输入文本的选项。知道如何使用 select 来实现吗？
浏览器独立答案来自这里：stackoverflow.com/a/39555400/1937033
所有浏览器都应该默认显示下拉箭头，该死。 :)

标签： css html html-datalist

【解决方案1】：

我使用 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>

【讨论】：

如何使用 jQuery/Javascript 设置该样式？我处于无法访问 css 的情况（很容易）。
嗨。我无法使用 jQuery 设置它。你可以看看这里stackoverflow.com/questions/9438949/…
@amol01 对 Mozilla 用户有什么想法吗？您是否有任何::calendar-picker-indicator 的参考页面或您可以链接的兼容性表？ Tks