删除输入文本的 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;
}

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

Answer 1

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

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