iPhoneやiPadでinput[type=”date”]の入力値を左寄せにする方法

シンプルに以下のようなinputを設置した場合、Windowsでは入力値は左寄せで表示されるのですが、iPhoneやiPadだと中央寄せになってしまいます。

<input type="date" name="date">

こんな感じです↓ Safariだけでなく、Chromeでも中央寄せです。

はいはい、text-alignで調整すれば良いのね。ということで以下のようなCSSを追加しても、左寄せになってくれません。

input[type="date"] {
  text-align: left;
}

Windowsと合わせて左寄せで表示したい、となるケースもありますよね。ということで今回は、iPhoneやiPadでinput[type=”date”]の入力値を左寄せにする方法をご紹介したいと思います。

iPhoneやiPadでもinput[type=”date”]の入力値を左寄せにするには、以下のようにCSSを指定します。

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

「::-webkit-date-and-time-value」を追加しないとtext-alignが効いてくれないわけですね。

こんな感じで左寄せになってくれました↓

あとがき

そもそもinput[type=”date”]はブラウザによっても結構見た目が違ったりしますし、無理に左寄せに合わせなくても良い気はします。

ただ、他のフォームや要素のデザインから浮いてしまう可能性もあるので、左寄せにしたい時はぜひ参考にしていただければと思います。