Input type="date" erscheint auf dem iPhone größer ⇐ HTML

[Anonymous]

Auf dem iPhone wird der Eingabetyp „Datum“ aus irgendeinem Grund anders gerendert als auf PC und Android und überläuft daher den übergeordneten Container.
Wie kann der Code geändert werden, um ein ähnliches Erscheinungsbild wie auf PC und Android zu erzielen?
Mein gesamter relevanter Code ist der Folgende:

Code: Select all

* {
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; }

Code: Select all

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

Der Screenshot dessen, was zu sehen ist:


Der Vorschlag von Copilot, dies hinzuzufügen:

Code: Select all

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

ist keine praktikable Lösung, da dadurch die Benutzeroberfläche für die Datumsauswahl vollständig entfernt würde.
Dies funktioniert auch nicht:

Code: Select all

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

Ich verwende (das neueste) iOS 26.2 auf dem Apple iPhone 13 mini.
Welches CSS kann ich anwenden oder welchen HTML-Code muss ich hinzufügen, um das Problem zu beheben? Oder gibt es eine JavaScript-Lösung?
Auf Android und auf dem PC funktioniert die betreffende Eingabe ordnungsgemäß.
Der Screenshot nach der Anwendung des vorgeschlagenen CSS von mplungjan im Inkognito-Modus:


Gibt es eine Möglichkeit, das Problem zu beheben? ohne Bootstrap zu verwenden?
Der Screenshot der Ausgabe von: https://jsfiddle.net/mplungjan/jypnrb0L/3/ ist unten zu sehen: