Chromeでdatalistを利用するとhoverで表示される三角を非表示にする

‘datalist’タグを利用してテキスト入力フォームに入力候補を表示する際に、Firefoxはいいのですが、Chromeでどうしても三角アイコンが表示されるという現象を確認しました。

selectと同じようにappearanceをnoneに指定して消せるだろうと思ったのですが、:hover,:focus,:activeいずれを指定しても消えませんでした。

あらためて英単語に絞って検索したところ、以下のようなCSSを追加することで非表示にすることがわかりました。

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

参考:Remove Datalist Dropdown Arrow in Chrome