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

Question

Chrome为其样式引入了更新的外观，包括具有下拉/叠加元素的时间和日期选择器元素。

我专门尝试设计input type="time"元素的样式。这是原生元素的演示。值得注意的是在 Chrome 83 下，它显示了更新的下拉页面以供选择。

具体来说，上面显示的下拉列表（带有蓝色背景的 00 和 00 文本，位于重叠元素上）是我想要以某种方式设置样式或修改的内容。

我在 Google Chrome DevTools 中启用了 shadow DOM 选项。我已经能够识别输入字段和图标等内容的伪元素，但不能识别下拉列表。

很难提供进一步的演示或链接，因为这只是本机输入。但是，这是我可以在基本本机输入上看到的伪元素的示例。

我的用例是我使用它的应用程序使用深色 UI 配色方案，而这个白色弹出元素非常刺耳。与自定义时间选择器相比，我更喜欢本机 HTML 输入（尤其是通过键盘可访问性快速选择小时/分钟/12 小时格式）。

理想情况下，我不想在这里做任何太过分的事情——我是否以正确的方式接近这个？希望这不会在 Chrome 更新时中断。

Answer 1

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

这条规则应该有效

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