删除Chrome中的Datalist Dropdown Arrow

Question

Chrome显然已向引用<datalist>的文字输入添加了一个下拉箭头。它出现在Chrome 34（Canary）中，但不在当前的稳定版本中（Chrome 31）。

仅在文本字段聚焦时显示（请参阅更新），并且应用于输入类型text和search。

就原生浏览器的实现而言，情况可能会更糟，但正如您在图片中看到的那样，它与我的设计规格相冲突。

有谁知道如何删除或替换此新功能？

<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">

更新

当场地悬停（不仅仅是聚焦）时，箭头也会出现，不幸的是，当按钮本身悬停时，它也有自己的背景颜色：

Answer 1

感谢alexander farkas的评论，以下是删除箭头的样式规则：

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

Answer 2

感谢Cantera。我不想完全摆脱黑色箭头，只是围绕它的灰色方块。

input::-webkit-calendar-picker-indicator {
  background-color: inherit;
  }

Answer 3

var count = 3;
$http.get(BaseUrl().url + 'jury/UpcomingEvents?someID=' + someID)
     .success(function (response) {
         $scope.UpcomingEvents = response;
         $scope.hello= $scope.UpcomingEvents[0].EventID;
         $scope.Total= $scope.hello + Count
});

同样为我删除了箭头，我发现创建了更好的点击体验，仍然可以点击箭头所在的位置，甚至可以增加它的宽度和高度＆gt; 1em并且在输入中可以放置自定义箭头作为背景图像，箭头将在那里。

Answer 4

正如其他人所提到的，componentDidMount的作用是去除箭头，这也会影响BodyComponent上的html5 datepicker，

要删除 just ，删除数据列表输入将是：

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

Answer 5

将父输入的list选项设置为空， <input list="" ... />，例如：

<input
  list=""
  name="option"
  id="input"
  autocomplete="off"
>

<datalist id="datalist">
  <option>Carrots</option>
  <option>Peas</option>
  <option>Beans</option>
</datalist>

见 mdn customizing_datalist_styles example

Answer 6

尝试删除默认样式的-webkit-appearance: none