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

225

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

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

我正在在线寻找一个网站，我希望使用与它们相同的占位符颜色。有可能弄清楚他们使用什么颜色？我想包含任何alpha值，所以我不能只使用图像编辑器对颜色进行采样。

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

在此处输入图片说明

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

html css

— 肖恩·安德森
source

— cport1 2014年

不。我清楚地指出我知道如何更改它，但是我想知道如何检查他人的财产。我什至提供了一个代码示例，说明我知道如何进行更改。

— 肖恩·安德森

什么是网站？由于占位符是伪元素，因此在检查该元素时，您仍然应该能够看到样式。

— cport1 2014年

Answers:

457

我想到了。

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

在此处输入图片说明

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

这样，您现在可以看到它：

在此处输入图片说明

— 肖恩·安德森
source

该设置在62中存在，并且工作精美。

— isherwood

Chrome 67和您的解决方案同样适用

— gefrag，

@gefrag我也使用Chrome 67，但找不到此选项。您能否现在将其放在哪个标签中？

— 本·卡尔普

有人知道如何看到::placeholder现在得到广泛支持的伪元素吗？

— swrobel

@swrobel此答案中提到的工作流程可让您检查::placeholder。请参阅此相关答案。

— 凯西巴斯克

下图显示了该过程：

转到设置>首选项：

单击显示用户代理Shadow DOM：

查看占位符的CSS：

— 杰伊·苏佩达（Jay Supeda）
source