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

Question

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

但是当我使用 Chrome 开发工具检查我的元素时，我在任何地方都看不到与 ::-webkit-datetime-edit 关联的 css 属性。也不在 "Styles" 面板或 "Computed" 面板中。

这是我的代码：

<input type="date">

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

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

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

Answer 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;
}

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

Answer 2

我刚刚在这个 post Inspect webkit-input-placeholder with developer tools

上找到了问题的答案

我需要做的是在 Chrome 开发者工具的设置面板中启用 'Show user agent shadow DOM'。现在属性可见。

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

How to inspect ::-webkit-datetime-edit in dev tools

html

css

webkit

input