Menu
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?
290
Date and time input types is Partially Supported on Safari 15, which means that any user who'd be accessing your page through Safari 15 can see it perfectly.
To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.
The <input type="date"> defines a date picker. The resulting value includes the year, month, and day.
-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.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
