Удалить Datalist Dropdown Arrow в Chrome

Chrome, по-видимому, добавил стрелку вниз к текстовым входам, которые ссылаются на <datalist>. Он появляется в Chrome 34 (Canary), но не в текущей стабильной сборке (Chrome 31).

Он появляется только тогда, когда текстовое поле сфокусировано (см. обновление) и применяется к обоим типам ввода text и search.

Это может быть хуже, чем реализация собственных браузеров, но, как вы можете видеть на изображении, это противоречит моим спецификациям дизайна.

Кто-нибудь знает, как удалить или заменить эту новую функцию?

<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">

Update:

Стрелка также появляется, когда поле зависает (а не только сфокусировано) и, к сожалению, также имеет свой собственный фоновый цвет, когда сама кнопка зависла:

Ответ 1

Благодаря комментарию alexander farkas, это правило стиля для удаления стрелки:

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

Ответ 2

Благодаря Cantera. Я не хотел полностью избавляться от черной стрелки, только вокруг нее был серый квадрат.

input::-webkit-calendar-picker-indicator {
  background-color: inherit;
  }

Ответ 3

input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

Также удалила стрелку для меня, и я обнаружил, что создал лучший клик, чтобы по-прежнему щелкнуть, где будет стрелка, вы даже можете увеличить ширину и высоту его > 1em, а на входе, возможно, ставится пользовательская стрелка как фоновое изображение, где будет стрелка.

Ответ 4

попробуйте -webkit-appearance: none, который должен удалить стили по умолчанию