HTML5 原生输入类型 ="time"元素，如何在 Chrome 中定位伪元素/样式下拉列表？

Question

Chrome 引入了 an updated look to their styles ，包括具有下拉/覆盖元素的时间和日期选择器元素。
我专门尝试设计 input type="time" 元素的样式。 Here is a demo of the native element 。值得注意的是在 Chrome 83 下，它显示了更新的下拉页面以供选择。

具体来说，上面显示的下拉列表(带有蓝色背景的 00 和 00 文本，位于重叠元素上)是我想要以某种方式设置样式或修改的内容。
我在 Google Chrome DevTools 中启用了 shadow DOM 选项。我已经能够识别输入字段和图标等内容的伪元素，但不能识别下拉列表。
很难提供进一步的演示或链接，因为这只是 native 输入。但是，这是我可以在基本 native 输入上看到的伪元素的示例。

我的用例是我使用它的应用程序使用深色 UI 配色方案，而这个白色弹出元素非常刺耳。与自定义时间选择器相比，我更喜欢 native HTML 输入(尤其是通过键盘可访问性快速选择小时/分钟/12 小时格式)。
理想情况下，我不想在这里做任何太过分的事情——我是否以正确的方式接近这个？希望这不会在 Chrome 更新时中断。

Answer 1

如果您不想显示下拉列表，您可以添加一个 css 规则来隐藏图标，当您单击该图标时，就会显示下拉列表。
这条规则应该有效

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}