javascripthtmlcssiosmobile

input type="date" appears larger on iPhone

On iPhone, for some reason, the input type="date" is rendered differently than on PC and Android, and so it is overflowing the parent container.

How can the code be modified to achieve a similar appearance to that on PC and Android?

My entire relevant code is the following:

* {
  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; }
<div class="row">
  <form onsubmit="event.preventDefault(); convertAndAnalyzeName();"><br/>
    <label for="surname1">Családnév:</label>
    <input type="text" id="surname1" class="form-control mb-3" placeholder="Pl: Nagy" aria-describedby="surname1Help">
    <small id="surname1Help">Add meg a családneved.</small>
    <br/>
    <br/>
    <label for="surname2">Második családnév:</label>
    <input type="text" id="surname2" class="form-control mb-3" placeholder="Pl: Kovács" aria-describedby="surname2Help">
    <small id="surname2Help">Add meg a második családneved, ha van ilyen.</small>
    <br/>
    <br/>
    <label for="firstname1">Utónév:</label>
    <input type="text" id="firstname1" class="form-control mb-3" placeholder="Pl: Dominik" aria-describedby="firstname1Help">
    <small id="firstname1Help">Add meg az utóneved.</small>
    <br/>
    <br/>
    <label for="firstname2">Második utónév:</label>
    <input type="text" id="firstname2" class="form-control mb-3" placeholder="Pl: Olivér" aria-describedby="firstname2Help">
    <small id="firstname2Help">Add meg a második utóneved, ha van ilyen.</small>
    <br/>
    <br/>
    <label for="birthdate">Születési dátum:</label>
    <input type="date" id="birthdate" class="form-control mb-3" aria-describedby="birthdateHelp" max="9999-12-31">
    <small id="birthdateHelp">Add meg a születési dátumodat (év.hónap.nap).</small>
    <br/>
    <br/>
    <button type="submit" onclick="convertAndAnalyzeName()">Átalakít és Elemzés</button><br/>
    <small>Az eredmény lentebb (lesz) olvasható.</small><br/><br/>
    </form>
</div>

The screenshot of what can be seen:

the problem in action

The suggestion of Copilot to add this:

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

is not a viable solution, because it would remove the date picker UI entirely.

Neither does setting this work:

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

I'm using (the latest) iOS 26.2 on Apple iPhone 13 mini.

What CSS can I apply, or what HTML do I need to add to fix this? Or there's a JavaScript solution?

On Android and on PC the input in question is working properly.

The screenshot after applying the suggested CSS by mplungjan on incognito:

screenshot after applying the mod

Is there a way to fix it without using Bootstrap?

The screenshot of the output of: https://jsfiddle.net/mplungjan/jypnrb0L/3/ can be seen below:

the output of the fiddle on iPhone 13 mini

Solution

  • Checked it on LT Browser, looks really fine. In case you are still facing issue, you can use media query as

    @media (max-width: 425px) {
    input[type="date"] {
        height: your preferred;
        width: your preferred;
    }
}

    You can adjust values according to your own wish as it suits best.