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

html css

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

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

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

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

https://i.stack.imgur.com/qaWat.png

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

How to change placeholder color on focus? 的可能重复项

不......我在问题中明确表示我知道如何更改它，但我想知道如何检查另一个人的属性。我什至提供了一个代码示例，表明我知道如何更改它。

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

yurylavrukhin

我想到了。

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

https://i.imgur.com/bVq5voX.png

要进行设置，请单击 Dev Tools 面板右上角的齿轮图标，然后确保选中左侧的 Preferences 选项卡，找到 Elements 标题，然后选中下方的“Show user agent shadow DOM”复选框标题。

有了它，您现在可以看到它：

https://i.stack.imgur.com/7Y0C0.png

该设置在 62 中，并且效果很好。

Chrome 67 和您的解决方案也适用

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

如果您在“⋮”按钮下找不到“设置”菜单项，它的左侧有一个齿轮⚙️ :)

它已移至 Settings > Preferences > Elements > [_] Show user agent shadow DOM

Jan Doggen

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

下图显示了该过程：

https://i.stack.imgur.com/QH98H.jpg

https://i.stack.imgur.com/kVEKn.jpg

https://i.stack.imgur.com/gOkUi.jpg

谢谢！我在 Chrome 设置中查找，但找不到它。显然，它位于开发工具设置中。