Chromeのデフォルトアイコンの名前を見極めて、表示変更する方法

1548 ワード
Chrome マークアップ コーディング Chrome テキストリンク

概要

本文はマークアップのtipsです。
chromeで画面確認をした時に、typeがtimeのinputタグの横に、例えば時計アイコンが入っていて、それをどうしても取り除きたい時に取り除く方法について記載してあります。

変更前　→　変更後

　→　

方法

1.開発者ツール設定を変更

まずは、開発者ツールの設定で、Shadow DOMの表示を有効にしてください。
これをしないことには対象のiconに関する情報が見れません。
有効にする方法がわからない方は以下の記事が参考になります。
参考: https://qiita.com/Tsuyoshi84/items/4ada593c76b0a1339b6e

2.名前を調査

開発者ツールで、該当のDOM要素を調査してください。
私の今回の場合は
-webkit-calendar-picker-indicatorという名前でした。

3.cssを記述

最後に表示を向こうにする記述を追加してください。
具体例としては牡蠣のようになります。

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

ブラウザで非表示になったことを確認できたら作業完了です。

こちらの記事参考になりましたら幸いです。
以上、お読みいただきありがとうございました。