使用开发人员工具检查webkit-input-placeholder

Question

可以使用以下内容为文本输入的占位符设置样式：

-webkit-input-placeholder {
    color: red;
}

我正在网上查看网站，我想使用与他们相同的占位符颜色。是否有可能弄清楚他们使用的是什么颜色？我想要包含任何alpha值，所以我不能只使用图像编辑器对颜色进行采样。

当我使用Chrome开发工具检查元素时，我看到：

开发工具在检查输入元素时不提供有关占位符元素的信息。还有另一种方式吗？

Answer 1

我明白了。

诀窍是在Chrome开发者工具的“设置”面板中启用“显示用户代理影子DOM”

要进行设置，请单击“开发工具”面板右上角的“⋮”按钮，然后单击“设置”，它位于默认“首选项”选项卡下。

有了这个，你现在可以看到它：

Answer 2

1. 对于Google Chrome 69版：
2. 打开检查元素：在Mac上+ Shift + C，在Windows / Linux上Ctrl + Shift + C或F12。
3. 点击右上角的“⋮”按钮，然后转到设置
4. 在设置中，单击“首选项”>单击“显示用户代理Shadow DOM”

以下图像显示了该过程：

转到设置>首选项：

单击“显示用户代理Shadow DOM”：

查看占位符的CSS：