Menu
Chrome has introduced an updated look to their styles, including time and date picker elements that have a dropdown / overlay element to them.
I'm specifically attempting to style an input type="time" element. Here is a demo of the native element. Worth noting is under Chrome 83 that it shows the updated dropdown page for selections.
Specifically, the dropdown shown above (the 00 and 00 text, with blue backgrounds, on an overlaid element) is what I would like to style or modify in some way.
I have enabled the shadow DOM option within the Google Chrome DevTools. I've been able to identify the pseudo elements for things like the input fields and icons and such, but not the dropdown.
It is difficult to provide further demonstrations or links since this is simply a native input. However, this is an example of the pseudo elements I can see on the basic native input.
My use-case is the app I'm using this for is for uses a dark UI color scheme, and this white popup element is very jarring. I prefer the native HTML input (especially with the keyboard accessibility of selecting the hour / minute / 12hour format quickly) over a custom timepicker.
Ideally I would not want to do anything too hacky here -- am I even approaching this in the right way? Want this not to break whenever Chrome updates.
658
What’s the <time> Element? The <time> element was introduced in the HTML5 spec in 2009. It was then dropped in 2011 in favor of <data>. Then <time> was reintroduced, and then improved to allow new date/time formats. From this you can see that specifications can be quite controversial.
Input Type Time The <input type="time"> allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.
As mentioned, older versions of Safari and a few other, less common, browsers don't support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the time picker on Chrome for Android looks like this:
The <input type="time"> defines a control for entering a time (no time zone). Tip: Always add the <label> tag for best accessibility practices! The numbers in the table specify the first browser version that fully supports the element.
You cannot change the style of time or datepicker dropdown as per chrome FAQ
https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome#how_do_i_change_the_appearance_of_the_date_picker
I suggest you to switch over to some custom or bootstrap controls.
74
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
