我可以消除 <datalist> 标签上的向下按钮吗？答案

【问题标题】：Can i eliminate down button on <datalist> tag?我可以消除 <datalist> 标签上的向下按钮吗？
【发布时间】：2014-06-08 23:24:20
【问题描述】：

<datalist> 是一个 HTML5 标签，用于对元素进行排序和选择。当我将它与<input> 一起使用时，它给了我this。

在我输入之前我不想看到这样的列表项，所以我可以消除它上面的这个向下按钮。有这个属性吗？

ALSO我可以使用<input>以外的其他标签

否 不是这个问题的答案！

【问题讨论】：

标签： html attr

【解决方案1】：

你最好的选择是：

 input::-webkit-calendar-picker-indicator {
     opacity: 0;
  }

<div class="form-field__control">
                  <input
                    type="text"
                    list="currency"
                    id="currency"
                  />
                  <datalist id="currency">
                    <option>Dollars</option>
                    <option>Pounds</option>
                    <option>Naira</option>
                    <option>Peso</option>
                  </datalist>
                </div>

【讨论】：

【解决方案2】：

这将删除输入框的历史记录，但是...，

<input type="text" autocomplete="off"/>

但我认为没有办法删除<datalist>

【讨论】：

【解决方案3】：

不幸的是，没有选择器可以做到这一点。

但是！
您可以将required 属性添加到<input> 标记。然后，我们可以通过 CSS3 标签访问这个输入：

input:valid - 当输入有内容时
input:invalid - 当输入为空白时

添加以下样式：

input:invalid::-webkit-calendar-picker-indicator {
  display: none;
}

仅当输入不为空时才会显示列表。

以下 JSFiddle 展示了实际操作，希望对您有所帮助： http://jsfiddle.net/5UYdy/2/

唯一的缺点是需要输入。

根据W3Schools

，你不能将它与其他元素一起使用

标签指定一个元素的预定义选项列表。

【讨论】：

【解决方案4】：

要删除向下箭头，请尝试在您的 CSS 中使用以下内容：

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

例如http://jsfiddle.net/5UYdy/

【讨论】：

它杀死了标签的真正功能
@user3301042 双击显示所有选项，输入字母带来建议，在这里工作