Input type date appearance in Safari on iOS

Question

I\'m trying to use a regular input type date to use on mobile devices. But the width set in the CSS is overruled by Safari (or webkit).

I can add -webkit-appea

Answer 1

if you want select only input[type='date'] and input[type='time'] try this CSS line.

input[type='date'], input[type='time'] {
    -webkit-appearance: none;
}

Answer 2

-webkit-appearance: none; does always remove the typical style of a picker... But you can easily add an arrow using CSS and a background-image.

I'm not aware of a way to custom style the input but also keeping the arrow.

Answer 3

I have found that to get 100% width correct as per @Boldizsar answer you need a little CSS calc action to remove the width added by the dropdown arrow on iOS.

-webkit-min-logical-width: calc(100% - 16px);

Answer 4

Add -webkit-min-logical-width: <your desired value>. It solved the problem for me!