使用开发人员工具检查webkit-input-placeholder [英] Inspect webkit-input-placeholder with developer tools

问题描述

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

It's possible to style a text input's placeholder with the following:

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

我在网上查看网站，颜色，因为他们。是否有可能找出他们使用什么颜色？

I am looking at a website online and I would like to use the same placeholder color as they do. Is it possible to figure out what color they used? I would like to include any alpha values, so I can't just sample the color with an image editor.

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

When I inspect the element with Chrome Dev Tools, I see:

>

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

Dev tools does not provide information regarding the placeholder element when inspecting the input element. Is there another way?

推荐答案

我想出来了。

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

The trick is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools:

现在可以看到：

>

这篇关于使用开发人员工具检查webkit-input-placeholder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！