inputのtypeがdateやtimeの場合に表示されるアイコンを非表示にする

input dateやtimeで表示されるアイコンを非表示にしたいことがあったので、設定方法をメモ。

サンプルコード

アイコンを非表示にするinputに対して.icon-delを追加します。

<input type="date" class="icon-del">
<input type="time" class="icon-del">

-webkit-calendar-picker-indicatorに対してCSSの設定を行います。

.icon-del::-webkit-calendar-picker-indicator {
  display: none;
}

これでdateとtimeのアイコンを非表示にすることができました。
アイコン非表示のデモページ