・input typeがdateのクリック範囲を広げるには？
こんな疑問にお答えします。
フォームを作るときに、日付選択用のinput type「date」を実装することありますよね。
ですがあれ、デフォルトだと右部分にあるマークをクリックしないと、カレンダーがでません。
右にあるカレンダーマークですね。
実際は入力欄どこをクリックしても日付入力欄がでてくるようにしたいはず。
実はCSSを使えば簡単に実装可能です。
すぐにできるよ！
ということで、この記事では「input typeが「date」のクリック範囲を広げる」について解説していきます！
input typeが「date」のクリック範囲を広げる
目次
【簡単】input typeが「date」のクリック範囲を広げる【コピペOK】
そんなクリック範囲を広げたサンプルがこちら↓
See the Pen input date クリック範囲を大きく➀ by jito-coder (@jito-coder) on CodePen.
入力欄のどこをクリックしても、日付選択の項目がでてきますよね。
<div class="date01">
<label class="date01__label">
<input type="date" name="" value="2023-10-01">
</label>
</div>.date01 input[type=date] {
position: relative;
}
.date01 input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.date01 input[type=date]::-webkit-clear-button {
-webkit-appearance: none;
}
.date01 input[type=date]::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}コードの中で重要な点がこちら↓
- 使わないボタンを非表示にする
- inputタグに対して「position: relative;」を指定
- 右部分のマークをinputタグに対していっぱいに表示
- 右部分のマークを透過させる
順に解説してきます。
まず使用しないボタンを非表示にします。
下記コードを使えばOK。
.date01 input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.date01 input[type=date]::-webkit-clear-button {
-webkit-appearance: none;
}次にinputタグに対して「position: relative;」を指定しましょう。
これは次の➂のためです。
.date01 input[type=date] {
position: relative;
}これが一番重要なポイントです。
デフォルトでは右にあるカレンダーマークをクリックしないと、日付選択ができません。
そのためこのカレンダーマークをinputタグいっぱいの大きさにしてあげましょう。
.date01 input[type=date]::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
height: 100%;
}「absolute」を用いて、横幅縦幅を100％にするだけです。
すると下記画像のようになり、inputタグのどこをクリックしても日付選択ができるようになります。
とはいえこのままでは、カレンダーマークが大きく反映してしまうため消したいですよね。
やり方は簡単でopacityを０にして透過させるだけ。
.date01 input[type=date]::-webkit-calendar-picker-indicator {
opacity: 0;
cursor: pointer;
}ついでに「cursor: pointer;」もつけてあげよう
これでマークは見えないけど、クリック範囲は拡大してる状態を実装できます。
【簡単】input typeが「date」のクリック範囲を広げる【コピペOK】：まとめ
- 使わないボタンを非表示にする
- inputタグに対して「position: relative;」を指定
- 右部分のマークをinputタグに対していっぱいに表示
- 右部分のマークを透過させる
input typeが「date」のクリック範囲を広げたい時はためしてみてね！
