redondeados - Inspeccionar HTML5 sombra de selector de fecha DOM
sombra interior css (2)
Estoy intentando inspeccionar el DOM sombra para ciertos controles HTML5, como el selector de fecha para el input type="date" y la lista desplegable de sugerencias reales para las entradas vinculadas a un datalist . Preferiblemente en Chrome, pero otros navegadores también lo harán.
Descubrí que al habilitar la configuración Shadow DOM en las opciones del inspector de Chrome, me permite inspeccionar el DOM shadow para la input real (que incluye la flecha del ::-webkit-calendar-picker-indicator para mostrar el ::-webkit-calendar-picker-indicator fechas) pero no el ::-webkit-calendar-picker-indicator fechas sí mismo:
Lo mismo ocurre con el datalist . Aparece, ya que estos controles no forman parte de la entrada, pero tampoco los puedo encontrar en ningún otro lugar en el panel de elementos.
¿Es posible inspeccionar tales elementos?
Edición pequeña para aclarar: en realidad estoy buscando qué pseudo-clases se aplican a qué controles. Hay muchos sitios que enumeran algunos de ellos, pero todavía tengo que encontrar una fuente que logre enumerar ::-webkit-calendar-picker-indicator para el elemento datalist , que se aplica. Estoy buscando más de esos bastardos astutos, y la mejor fuente para eso, por supuesto, es la boca del caballo.
La ventana emergente de calendario de Google Chrome no está en Shadow DOM. Está en una página separada asignada a una ventana emergente. Ver WebPagePopupImpl.cpp
Y el contenido emergente está escrito por HTML / JavaScript .
Parece que el selector real está cargado en una capa completamente diferente (básicamente una ventana diferente sin la barra de título). Así que supongo que la respuesta es: no, no puedes.
Estoy de acuerdo en que sería genial poder personalizarlo. Y ventanas emergentes similares también. Mozilla en XUL tiene display:popup que se usa en los menús de contexto, el menú desplegable y cosas similares. Sería definitivamente genial poder usar eso en el contenido del usuario también.