如何使Datalist箭头始终可见

时间:2016-02-04 09:10:11

标签: css html5 html-datalist

我想让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>

enter image description here

环境:角度指令

任何想法如何实现呢?

最佳,

2 个答案:

答案 0 :(得分:19)

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

答案 1 :(得分:0)

选中的答案仅适用于Chrome。

对于IE和Firefox,我在这里找到答案:https://stackoverflow.com/a/39555400/1937033