How to Align Text Left on iOS Date Inputs (input[type="date"])

By default, inputs of type date on iOS are center-aligned.

<input type="date" />

Text Align Attempts on iOS

Applying text-align: left and/or text-align: -webkit-left doesn’t work properly on Safari, iOS 15 and above.

Adding display: block also doesn’t fix anything.

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

Text Align Solution on iOS

When we inspect Safari’s date input on iOS, we’ll see the following:

<input name="example" type="date">
  <div pseudo="-webkit-date-and-time-value">Mar 03, 2022</div>
</input>

The child div element has these following styles:

input::-webkit-date-and-time-value {
  margin-top: 0px;
  text-align: center;
  width: 100%;
}

In order to override the text alignment, we’ll want to target the element using this selector.

input::-webkit-date-and-time-value {
  text-align: left;
}