I am trying to align the entered date to the left in input[type='date']. However, when testing on mobile browsers like safari and chrome, the date remains centered within the input. mobile example
This is the code I have been working on:
.container {
display: flex;
justify-content: center;
}
.date-input {
display: flex;
justify-content: flex-start;
height: 2rem;
width: 300px;
text-align: left;
}<div class="container">
<input type="date" class="date-input" />
<div>Am I missing something in the CSS that prevents me from left-aligning the entered date within the input, or do mobile browsers have a default behavior of centering the date?