HTML5 原生输入类型=“时间"元素，如何在 Chrome 中定位伪元素/样式下拉列表? [英] HTML5 native input type="time" element, how to locate pseudo element / style dropdown in Chrome?

问题描述

Chrome 推出了

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

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

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

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

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

解决方案

您不能根据 chrome 常见问题更改时间或日期选择器下拉列表的样式

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

我建议您切换到一些自定义或引导程序控件.

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.

解决方案

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.

这篇关于HTML5 原生输入类型=“时间"元素，如何在 Chrome 中定位伪元素/样式下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！