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.