こんにちは、くしだです。
前回に引き続きContact Form7のフォームタグをカスタマイズしていきます。
今回は「日付」タグです。
日付タグのカスタマイズ
See the Pen
Contact Form7 date by kushi (@kushi95)
on CodePen.
前回のセレクトボックスとほぼ同様に、矢印のカスタマイズと初期値の色のみ変更を行いました。
ここからが今回の内容です。
デフォルトだと右側にカレンダーのアイコンが表示されているので非表示にしていきます。
注意点として、デフォルトのクリック領域がこのアイコンのみなので、ただ消してしまうとカレンダーを開くことができません。
なので、opacity:0;で見えなくしておきます。
- &::-webkit-calendar-picker-indicator {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- }
そして、このアイコンを親要素いっぱいに広げてあげることで全体がクリック領域になりました。