iPhoneでinput type “date”(日付選択ボタン)がめちゃめちゃ小さい件の対処方法

当サイトには広告が含まれています。

WordPress上で設置したフォームについての備忘録です。

今回Contact form7というWordPressのお問い合わせフォームのプラグインを使用して、input type=”date”のボタンを使用したんですが、iPhoneから見た時だけ入力欄がめちゃくそ小さくてわかりづらかったので、CSSで対処しました。

ちなみにAndroidでは大丈夫でした。

目次

どういう状態か

まずパソコンで見たときは普通に年/月/日/という文字が表示されていて、ボタンであることがわかる状態です。(ChromeでもSafariでも問題ない)ここは問題ありません。

しかしiPhoneのsafari、Chromeどちらで見ても、このような画像状態で、ボタンらしさはありません。

左端になんかありますがこれがdateピッカーです

これではお客さんが使いづらいので、修正します。

疑似要素でテキストを入れることで対処可能

他にも対処方法はあるのかもしれませんが、単純にwidth: 100%;にしたところで、ただグレーのバーが横に伸びるだけですので、疑似要素で文字を入れて、選択を促すことにしました。

使ったCSSはこちら(Contactform7専用)

CSS
@media screen and (max-width: 850px){
	.wpcf7-date{
		width: 80% !important;
		margin: 0 0 10px 0;
	}
	.wpcf7-date::before{
		content: '日付を選択する';
		font-size: 12px;
	}
}

WordPressのContact form7のインプットタグに合わせて書いてますので、このプラグインを使用されていない方はご自身のinput type=”date”のタグに書き換えて使用してください。

完成した状態はこちら

「日付を選択する」という文字がフォームエリア内に入っていることがわかる

これで日付の選択を促すことが出来ていると思います。

疑似要素なのでこのコメント文がメールフォームで送信されることはありません。一応、送受信の確認はしてくださいね。

デザイン作るの難しい〜!と感じたら

デザイン・ホームページで

お困りのことがありましたら、
私たちクートスラボにご依頼ください!
実績多数の女性クリエイターチームが、

どんなお悩みも解決します。

\ 南大阪・泉州でデザインのご依頼はこちら /

シェアお願いします!
  • URLをコピーしました!
目次