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

【问题标题】：Inspect webkit-input-placeholder with developer tools使用开发者工具检查 webkit-input-placeholder
【发布时间】：2015-01-07 07:05:10
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

我想通了。

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

要进行设置，请单击开发工具面板右上角的齿轮图标，然后确保选择左侧的“首选项”选项卡，找到“元素”标题，然后选中“显示用户代理影子 DOM”该标题下方的复选框。

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

【讨论】：

设置在 62 中，效果很好。
Chrome 67 和您的解决方案也适用
@swrobel 此答案中提到的工作流程可让您检查::placeholder。看到这个related answer。
如果您在“⋮”按钮下找不到“设置”菜单项，它的左侧有一个齿轮⚙️ :)
已移至 Settings > Preferences > Elements > [_] Show user agent shadow DOM

【解决方案2】：

下面的图片展示了这个过程：

转到设置 > 首选项：

点击 Show user agent Shadow DOM:

查看占位符的CSS：

【讨论】：