
パソ君
・input type「date」の値を左寄せするにはどうするの?
こんな疑問にお答えします。
input type「date」にて作成された値は、通常左寄せされます。
ただiPhoneやiPadのSafariで見ると、中央配置されてしまうんですよね。
デザインによっては左寄せしたいはず。
実はこれ、簡単に対策可能です。

ジト
すぐにできるよ!
ということで、この記事では「input type「date」の値を左寄せする」について解説していきます!
この記事でわかること
input type「date」の値を左寄せする
【解決】input type「date」の値を左寄せする【Safari・iPhone・iPad】
結論:下記コードを使えばSafariでも値を左寄せできます。
input[type="date"]::-webkit-date-and-time-value {
text-align: left;
}
「::-webkit-date-and-time-value」に対して指定すればOK。
下記がサンプルになります。
See the Pen input type「date」の値を左寄せする➀ by jito-coder (@jito-coder) on CodePen.
iPhone・iPadのSafariで見てみてください!
値が左寄せになっていますよね。
【解決】input type「date」の値を左寄せする【Safari・iPhone・iPad】
- input type「date」の値はiPhoneやiPadのSafariで見ると中央配置される
- 「::-webkit-date-and-time-value」を使って左寄せすればOK

ジト
input type「date」の値を左寄せしたい時はためしてみてね!