如何在开发工具中检查 ::-webkit-datetime-edit [重复]答案

【问题标题】：How to inspect ::-webkit-datetime-edit in dev tools [duplicate]如何在开发工具中检查 ::-webkit-datetime-edit [重复]
【发布时间】：2020-05-13 23:25:10
【问题描述】：

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

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

这是我的代码：

<input type="date">

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

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

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

【问题讨论】：

标签： html css input webkit

【解决方案1】：

试试这个

::-webkit-datetime-edit-ampm-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-week-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-text {
   color:darkred;
}

这可能是您的问题的解决方案，您可以编辑所有内容，希望它有效！

【讨论】：

感谢您的回答，但不幸的是这无济于事，我在检查器中也看不到这些属性
@neiya 我知道这听起来很愚蠢，但你检查过你的链接标签了吗？

【解决方案2】：

我刚刚在这篇帖子Inspect webkit-input-placeholder with developer tools找到了我的问题的答案

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

【讨论】：

这应该是公认的答案！