15

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?

Simon Edström
  • 6,461
  • 7
  • 32
  • 52
SamJ
  • 191
  • 1
  • 1
  • 5

4 Answers4

17

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

Dion
  • 3,145
  • 20
  • 37
  • 1
    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! – SamJ Aug 23 '13 at 08:36
9

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

TLama
  • 75,147
  • 17
  • 214
  • 392
Boldizsar
  • 683
  • 2
  • 8
  • 17
  • 1
    It seems that the toggle arrow is placed outside of the element. So width=100% will make it to big. – sbaechler Mar 07 '14 at 14:56
  • If you use CSS calc and minus the 16px of the arrow this works perfectly. `-webkit-min-logical-width: calc(100% - 16px);` – Phil Cook Mar 15 '18 at 15:34
8

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;
}
eclaude
  • 846
  • 14
  • 30
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);
Phil Cook
  • 2,025
  • 19
  • 25