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

Question

<datalist>是一个HTML5标记，用于订购元素并选择它们。当我将其与<input>一起使用时，它会给我this。

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

ALSO 我可以使用除<input>

之外的其他标签

否 不是这个问题的答案！

Answer 1

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

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

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

Answer 2

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

<强> BUT！
您可以将required属性添加到<input>代码中。然后，我们可以通过CSS3标签访问此输入：

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

添加以下样式：

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

仅当输入不为空时，

才会显示列表。

以下JSFiddle显示在行动中，希望它有所帮助： http://jsfiddle.net/5UYdy/2/

唯一的缺点是输入是必需的。

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

  

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

Answer 3

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

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

---

  

但我认为无法移除<datalist>

---

Answer 4

你最好的选择是：

 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>