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

harada 126views 更新:2016年1月27日

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

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

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

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

参考:Remove Datalist Dropdown Arrow in Chrome

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません