<input type="date">で別のアイコン表示をしたい（スマートフォン）

Question

前提

<input type="date">でデフォルトで表示されるカレンダーアイコンと年/月/日を非表示にして、
別のアイコン画像を表示したい。

PCでは実現できましたが、スマートフォンで実現ができませんでした。
ご教示よろしくお願いいたします。

発生している問題・エラーメッセージ

iPhoneで、ページを開いた時には非表示になっているが、一度カレンダーを表示させると年/月/日が表示される。

該当のソースコード

<div class="calender">
    <label>
        <span title="日時を選択">
            <img src="./img/icon-calendar.png">
        </span>
        <input type="date">
    </label>
    <label class="calender-close">×</label>
</div>

試したこと

//年/月/日　非表示
input::-webkit-datetime-edit-fields-wrapper {
    display: none;
}

補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

inputの実装はブラウザによりバラバラなので、そのあたりを吸収してくれるCSSフレームワークやJavaScriptプラグイン使った方が良いと思いますが、あくまで自分でなんとかしたいということですか？

[takuharu]

ご回答ありがとうございます。
実現できるのであればJSを使っても問題ありません。
ご教示いただけますと幸いです。

[m.ts10806]

datepicker
で検索。

[takuharu]

ありがとうございます。
調べてみます！

Answer 1

Android の Chrome と iOS のすべてのブラウザでは input::-webkit-date-and-time-value を非表示にすればテキストが消えるかと思います。

Comments

[takuharu]

ご教示大変ありがとうございます。
消えました！！！！
このShadowDOMは見つけられませんでした。
ご教示いただかなければもう諦めていたところです。
大変ありがとうございました。