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