When using date inputs webkit browsers like Chrome will show some controls on the right side. However on mobile devices those controls don’t show up and you will end up with a strange padding on the right side. The date inside the field doesn’t go until the end of the input field but instead gets cropped off way before. Have a look at the following example:
See the Pen Example of cropped off date in date input by Chris (@Lingulo) on CodePen.
I spent some time trying to find out what was the problem. After some research I realized that even though the date controls are not displayed on mobile devices they still take up their space. So in order to fix this we need to hide the controls in webkit browsers. We can do this by using ::-webkit-clear-button, ::-webkit-inner-spin-button and ::-webkit-calendar-picker-indicator.
See the Pen Example of cropped off date in date input by Chris (@Lingulo) on CodePen.
Note that this will hide the date controls in general. You might want to make sure to only hide them on mobile devices by using CSS media queries.
