2024.09.14
2025.04.16

【解決】iOSでinput[type="date"]を左寄せにする簡単な方法

【解決】iOSでinput[type=
iphoneやiPadでSafariを使うときにinput[type="date"]が左寄せにならない時の対策をお伝えします

左寄せにならない

<input type ="date" class="date">

.date {
width: 200px;
text-align: left;
}

問い合わせフォームなどで上記のような要素を記述した際、

Windowsでは左寄せになるのですがSafariでは中央寄せになってしまいます。

-webkit-date-and-time-valueを使う

実はSafariなどでは-webkit-date-and-time-valueを追加しないとtext-alignが効いてくれません。

cssを以下のように記述しましょう

.date::-webkit-date-and-time-value  {
width: 200px;
text-align: left;
}

これにて解決!!

ABOUT ME
たけし
たけし
元教育業界で講師を務め、

小さなWebアプリの個人開発を経て、

未経験から転職に成功。

現在はWEBアプリケーションエンジニアとして、

フルスタックで仕事をしています。

保有資格:

・AWS SAA

・統計検定2級

・日商簿記2級
【注意喚起】Excelの挿入タブを押すと落ちる!?KB5002700が原因か?簡単な対処方法まとめ
【注意喚起】Excelの挿入タブを押すと落ちる!?KB5002700が原因か?簡単な対処方法まとめ
【解決方法】User Profile Serviceサービスによるサインインの処理に失敗しました。ユーザープロファイルを読み込めません
【解決方法】User Profile Serviceサービスによるサインインの処理に失敗しました。ユーザープロファイルを読み込めません
Cursorが起動しない!エラー時の対処法を徹底解説
Cursorが起動しない!エラー時の対処法を徹底解説
ABOUT ME
たけし
元教育業界で講師を務め、

小さなWebアプリの個人開発を経て、

未経験から転職に成功。

現在はWEBアプリケーションエンジニアとして、

フルスタックで仕事をしています。

保有資格:

・AWS SAA

・統計検定2級

・日商簿記2級