删除输入文本的Chrome样式（列表）

I am trying to build a custom input text list. I have an image I would like to use as arrow, so that I can click and show the list of values. I am also using AngularJS.

我正在尝试构建自定义输入文本列表。我有一个我想用作箭头的图像，这样我就可以点击并显示值列表。我也在使用AngularJS。

The following code does not work as expected. My issue is: I see a black arrow on the left of the yellow arrow when passing over or clicking (otherwise no arrow)

以下代码无法按预期方式工作。我的问题是：当我经过或点击时，我看到黄色箭头左侧有一个黑色箭头（否则没有箭头）

Here's a link to try it (no yellow arrow is shown, but there is some white space on the right of the undesired black arrow): http://jsfiddle.net/wbo3pt9u/

这是一个尝试它的链接（没有显示黄色箭头，但是在不需要的黑色箭头右侧有一些空白区域）：http：//jsfiddle.net/wbo3pt9u/

Here's the code.

这是代码。

<input type="text" list="typeL" ng-model="tipo" class="list" placeholder="Type">
    <datalist id="typeL">
    <option ng-repeat="objectType in objectTypes"
                            value="{{objectType.typeWorkOfArt}}" } />
</datalist>
</input>

CSS:

CSS：

.list {
    background: url('../images/arrow.png') no-repeat top right;
    border-radius: 20px;
    width: 160px;
    height: 33px;
    -webkit-appearance: none;
    border: 2px solid #c1c4c6;
    line-height: 29px;
    cursor: pointer;
    font-weight: normal !important;
    font-style: italic;
    font-size: 1.250em;
    padding:0 30px 0 10px !important;
    color: #58585A;
    overflow: hidden;
    margin: 10px;
}

.input {
    border-radius: 20px;
    width: 160px;
    height: 33px;
    -webkit-appearance: none;
    border: 2px solid #c1c4c6;
    line-height: 29px;
    cursor: pointer;
    font-weight: normal !important;
    font-style: italic;
    font-size: 1.250em;
    padding: 0 1em;
    color: #58585A;
    margin: 10px;
}

I also tried to use a , which worked correctly: no black arrow and single click. Now that I switched to this element, it does not work. How can I fix it?

我也尝试使用一个正常工作的：没有黑色箭头和单击。现在我切换到这个元素，它不起作用。我该如何解决？

1 个解决方案

#1

Solved by introducing this CSS lines:

通过引入此CSS行解决：

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