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-appearance: none; to the CSS and by that, the width will work as expected. But then I lose all the other styling that is wanted, for example the arrow to indicate that it is a picker.

Is there a way that I can keep the basic styling of an input type date, but rule over the width myself?

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

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);

View more solutions

Comments

[Daniel Hallqvist]

An interesting question. I have been wondering as well why webkit behaves this way.

[Daniel]

have you tried to add important!?

[Daniel]

Also, take a look at this question: stackoverflow.com/questions/5615980/…

[SamJ]

Yes, I've tried with !important but it makes no difference.

[SamJ]

Yes, thats how I fixed this. It seems like an excessive way to just alter the width of the element, but there just might not be another way. Thanks alot!

[sbaechler]

It seems that the toggle arrow is placed outside of the element. So width=100% will make it to big.

[Phil Cook]

If you use CSS calc and minus the 16px of the arrow this works perfectly. -webkit-min-logical-width: calc(100% - 16px);