如何使Datalist箭头总是可见 [英] How to make Datalist arrow to be always visible

问题描述

我想让datalist列表元素总是可见。作为标准后聚焦失去，箭头消失。

我想让它总是这样：
这是plunker：

ENVIRONMENT：Angular指令

如何实现呢？

最好，

解决方案

css：

< pre class =snippet-code-css lang-css prettyprint-override> input :: - webkit-calendar-picker-indicator {opacity：100; }

 < input list =browsersname = myBrowser/> < datalist id =browsers> < option value =Chrome> < option value =Firefox> < option value =Internet Explorer> < option value =Opera> < option value =Safari> < / datalist>  

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,

解决方案

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>

这篇关于如何使Datalist箭头总是可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！