背景
カレンダーを以下のような表示にしたいなと思った為です。
実装
今回は以下のアイコンを例にします。
input[type="date"]::-webkit-calendar-picker-indicator {
background:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="18" height="18" viewBox="0 0 24 24"%3E%3Cpath fill="%230098c2" d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"%2F%3E%3Cpath fill="%230098c2" d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2M19 8l.001 12H5V8z"%2F%3E%3C%2Fsvg%3E')
}
以下のようになりました。
次にアイコンとテキストの位置を反転させます。
input[type="date"]::-webkit-calendar-picker-indicator {
background:url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="18" height="18" viewBox="0 0 24 24"%3E%3Cpath fill="%230098c2" d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"%2F%3E%3Cpath fill="%230098c2" d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2M19 8l.001 12H5V8z"%2F%3E%3C%2Fsvg%3E');
position: absolute;
left: 750px;
}
input[type="date"]::-webkit-datetime-edit {
position: relative;
left: 50px;
}
枠線も消します
input[type="date"] {
border:none;
}
以下のようにイメージした日付入力フォームができました！
その他
shadowDOMをdevtoolで見れるようにする
devtool開く→歯車 → Elements → 「Show user agent shadow DOM」 をチェック
これでdevtool開きながら位置を調整しました。
参考
- https://qiita.com/d0ne1s/items/418a790863837a171965
- https://stackoverflow.com/questions/29436074/change-date-input-triangle-to-a-calendar-icon
- https://note.com/bears_aimaru/n/nf3c35fefa542
- https://stackoverflow.com/questions/63121577/how-do-i-change-the-position-of-the-datepicker-calendar-icon-in-my-bootstrap-for