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のアイコンを非表示にすることができました。
アイコン非表示のデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31