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

[Anonymous]

Auf dem iPhone verhält sich die Eingabe type="date" irgendwie so, als hätte sie eine min-width-Eigenschaft, obwohl dies nicht der Fall ist.
Mit anderen Worten: Der übergeordnete Container wird überfüllt.
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äß.
Wenn Sie die tatsächliche Website in Aktion sehen möchten: https://www.szammisztika.org/
Der Screenshot nach der Anwendung des vorgeschlagenen CSS von mplungjan im Inkognito-Modus:


Gibt es eine Möglichkeit, das Problem zu beheben, ohne Bootsrap zu verwenden?