css - 如何为具有 "list"属性的文本输入设置下拉菜单的样式？

Question

我创建了一个带有“列表”属性的文本输入，我想知道是否有一种方法可以设置默认下拉箭头的样式。

<input type="text" name="subject" id="subject" list="subjects" placeholder="Subject">
<datalist id="subjects">
    <option value="General Question"></option>
    <option value="Technical Support"></option>
    <option value="Billing Question"></option>
    <option value="Report a Bug"></option>
</datalist>

这是结果。

Answer 1

只需将此添加到您的 CSS 中，即可从 chrome 输入中删除和添加箭头/指示符。

//Remove Native Arrow
input::-webkit-calendar-picker-indicator {
  display: none;
}

//Add Image Arrow
input[list]{
   background:url("//www.bricklink.com/3D/down.png") no-repeat right 1px; // Adjust your needs
}

DEMO HERE