Input type="date" на iPhone выглядит крупнее ⇐ Html

[Anonymous]

На iPhone по какой-то причине ввод type="date" отображается иначе, чем на ПК и Android, поэтому он переполняет родительский контейнер.
Как можно изменить код, чтобы добиться внешнего вида, аналогичного коду на ПК и Android?
Весь мой соответствующий код выглядит следующим образом:

Код: Выделить всё

* {
box-sizing: border-box;
}

:root {
--bg-color: #fdf6e3;
--text-color: #1f2933;
--accent-color: #d97706;
}

body {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
}

input[type="text"], input[type="date"] {
width: 100%;
padding: 0.5rem 0.6rem;
border-radius: 4px;
border: 1px solid #cbd2d9;
font-size: 0.95rem;
color: var(--text-color);
background-color: #fff;
}
button[type="submit"] {
background-color: var(--accent-color);
color: #fff;
border: none;
border-radius: 4px;
padding: 0.6rem 1.2rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease-in-out, transform 0.05s ease-in-out;
}
.mb-3 {
margin-bottom: 0.75rem;
}

.form-control {
display: block;
}

.row {
width: 100%;
}
/* suggestion by mplungjan */
input[type="date"] {   display: block !important;   width: 100%;   max-width: 100%;   min-width: 0; }

Код: Выделить всё

Családnév:

Add meg a családneved.

Második családnév:

Add meg a második családneved, ha van ilyen.

Utónév:

Add meg az utóneved.

Második utónév:

Add meg a második utóneved, ha van ilyen.

Születési dátum:

Add meg a születési dátumodat (év.hónap.nap).

Átalakít és Elemzés

Az eredmény lentebb (lesz) olvasható.

Скриншот того, что можно увидеть:


Предложение второго пилота добавить это:

Код: Выделить всё

@supports (-webkit-touch-callout: none) {
/* iOS-specific tweaks */
input[type="date"] {
-webkit-appearance: none; /* Reduce native styling impact */
appearance: none;
}
}

не является жизнеспособным решением, поскольку оно полностью удалит пользовательский интерфейс выбора даты.
Этот вариант не работает:

Код: Выделить всё

    input[type="date"] {
width: 100%; /* Responsive width */
max-width: 100%;  /* Prevent overflow */
}

Я использую (последнюю версию) iOS 26.2 на Apple iPhone 13 mini.
Какой CSS я могу применить или какой HTML мне нужно добавить, чтобы это исправить? Или есть решение на JavaScript?
На Android и на ПК рассматриваемый ввод работает правильно.
Снимок экрана после применения предложенного mplungjan CSS в режиме инкогнито:


Есть ли способ исправить это без использования Bootstrap?
Скриншот вывода: https://jsfiddle.net/mplungjan/jypnrb0L/3/ можно увидеть ниже:



Подробнее здесь: https://stackoverflow.com/questions/798 ... -on-iphone