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

Question

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

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

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

这是代码。

<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：

.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;
}

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

Answer 1

通过引入这些CSS行来解决：

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