问题
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?
回答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.
回答2:
Add -webkit-min-logical-width: <your desired value>. It solved the problem for me!
回答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;
}
回答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);
来源：https://stackoverflow.com/questions/18381594/input-type-date-appearance-in-safari-on-ios