Question

在HTML5中，<input>元素有一个新属性list，当我添加此属性时，会自动添加一个下拉图标。如何更改此图标的样式或将其删除。

另外，我想要一个<input>元素集中但没有输入文字的动作，<datalist>中的所有元素都会被展示，如何实现它？

<input list="test-list" type="text">
<datalist id="test-list">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</datalist>

Answer 1

您正在寻找peusdo-element ::-webkit-calendar-picker-indicator：

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

<input list="test-list" type="text">
<datalist id="test-list">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</datalist>

但是，值得一提的是<datalist>有ridiculously bad support，所以你最好只使用一个简单的<select>，它允许使用{{1}进行样式化}：

background

select {
  width: 268px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 5px;
  height: 34px;
  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
  -webkit-appearance: none;
  background-position-x: 244px;
}

希望这有帮助！：）

如何使用list属性删除input元素中的下拉图标？

1 个答案: