input[type=date]にfontAwesomeのアイコンを使いたい

Question

前提・実現したいこと

https://codepen.io/ksyunnnn/pen/aqMKzR
input[type=data]に、デフォルトで表示されるカレンダー制御の矢印アイコンを、別のアイコンに変更するための、上記URLにあるコードを動かしたいです。

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

アイコンが変更されないです。

input[type=date]::-webkit-calendar-picker-indicator:beforeというセレクタが反応していなさそう

該当のソースコード

<input type="date">

/* スピンボタン（上下ボタン）を非表示 */
input[type=date]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* 無入力時の 年/月/日 を / / にする */
input[type=date]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}
/* /の色を変える */
input[type=date]::-webkit-datetime-edit-text {
  color: #666;
}
/* clearボタンの非表示 */
input[type=date]::-webkit-clear-button {
  -webkit-appearance: none;
}
/* カレンダーのインジケータ（▼）を非表示 */
input[type=date]::-webkit-calendar-picker-indicator {
  color: transparent;
  position: relative;
}
/* fontAwesomeのカレンダーアイコンをインジケータにする */
input[type=date]::-webkit-calendar-picker-indicator:before {
  color: #666;
  font-family: FontAwesome;
  /*content: "\f073";*/ /* fa-calendar */
  content: "\f133"; /* fa-calendar-o */
  position: absolute;
  left: -5px; /* ここら辺はいい感じの塩梅で */
  top: -5px;  /* ここも */
}

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

こちらの記事を参考にしています。
https://qiita.com/MssKnd/items/1e55264b5e3acc609e1f

よろしくお願いいたしますm(_ _)m

Comments

[showkit]

参考サイトのようにやってみましたが結論からいうと「無入力時の 年/月/日 を / / にする」ってのと「fontAwesome のカレンダーアイコンをインジケータにする」ってのが、うまくいきませんね。動作が変わったのかもしれません。

[ksyunnnn]

ありがとうございます。指摘の通りなのかもしれません。。

Answer 1

https://stackoverflow.com/questions/18326982/open-html5-date-picker-on-icon-click

上記の記事の通りの表現で実現しました。
デフォルトのインディケーターを変更することはせず、ポジションプロパティを利用してインディケーターにアイコンを重ねています。

実際に書いたコード
https://codepen.io/ksyunnnn/pen/JpzvRM

ありがとうございました。