<input type="date">でどこをクリックしてもカレンダーが表示されるようにする
<input type="date">を使うとカレンダーを使った入力が出来るようになります。
ただデフォルトの状態だと、下記のように上部右端のカレンダーアイコンをクリックしないとカレンダーが表示されません。あるシステムへ実装した時に指摘してくれた人がいて気が付いたけど、忙しい作業をしている時とか、カレンダーアイコンにいちいち合わせないといけなくて、これがけっこうストレス。。
そこで、入力欄のどこをクリックしてもカレンダーが表示できるように改良してみました。
こんな感じでどこをクリックしてもカレンダーが出るようになりました。
参考にしてみてくださいね。
<input type="date">でどこをクリックしてもカレンダーが表示されるようにする
| index.html |
|---|
| <input type="date"> |
| style.css |
|---|
|
input[type="date"] { width: 100px; position: relative; } input[type="date"]::-webkit-inner-spin-button{ -webkit-appearance: none; } input[type="date"]::-webkit-clear-button{ -webkit-appearance: none; } input[type=date]::-webkit-calendar-picker-indicator { position: absolute; width: 100%; height: 100%; opacity: 0; } |
