如何在开发工具中检查 ::-webkit-datetime-edit

Question

我使用::-webkit-datetime-editCSS 属性来控制 webkit 浏览器的日期输入字段的外观。为了进一步调试，我想在我的开发工具中检查它。

但是当我使用 Chrome 开发工具检查我的元素时，我在任何地方都看不到与::-webkit-datetime-edit. 也不在“样式”面板或“计算”面板中。

这是我的代码：

<input type="date">

[type="date"]::-webkit-datetime-edit {
  background-color: red;
  color: transparent;
}

这是一个代码笔：https://codepen.io/neiya/pen/jOERJQb

是否可以使用 Chrome 或其他浏览器开发工具查看和编辑这些属性？

Answer 1

我刚刚在这篇文章中找到了问题的答案，使用开发人员工具检查 webkit-input-placeholder

我需要做的是在 Chrome 开发者工具的“设置”面板中启用“显示用户代理影子 DOM”。现在属性可见。