input type="time"に表示される時計のアイコンを非表示にする ⏰

Googe Chromeではinput type="time"の右端に時計のアイコンが表示されます。

このアイコンは、

[input type="time"]::-webkit-calendar-picker-indicator

というCSSセレクタでセレクトできるので、非表示にしたい場合、

[input type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

で非表示になります。

しかし、こちらのアイコンには機能が実装されており、クリックすると、

このようなモーダルが表示されるのですが、アイコンを非表示にしてしまうとこの機能が使えなくなってしまいます。

そこで、display: noneは止めて、アイコンを透明にしつつ中央に移動してみましょう。

[input type="time"] {
  position: relative;
}

[input type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    opacity: 0;
  }
}

そうすると、アイコンを不可視にしつつ、機能だけ残すことができます。

DEMO