Удаление стиля 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; 
}