Выровнять введенную дату при вводе [type='date'] в мобильных браузерах

#html #css

#HTML #css

Вопрос:

Я хочу выровнять введенную дату по левому input[type='date'] краю. Однако в мобильных браузерах (я тестирую Safari и Chrome) дата остается в центре input . мобильный пример

Вот код, с которым я работаю:

 .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>

Развернуть фрагмент

Изолированная среда кода

Есть ли что-то, чего мне не хватает в CSS, или мобильные браузеры просто заставляют вас центрировать введенную дату внутри input ?

Ответ №1:

Я только что провел быстрый тест на симуляторе iOS, связанном с Safari dev tools, и обнаружил, что есть псевдоэлемент, который мы можем стилизовать…

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