Html 使用开发人员工具检查 webkit-input-placeholder
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26852922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inspect webkit-input-placeholder with developer tools
提问by Sean Anderson
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.
我正在查看一个在线网站，我想使用与他们相同的占位符颜色。是否有可能弄清楚他们使用的是什么颜色？我想包含任何 alpha 值，所以我不能只使用图像编辑器对颜色进行采样。
When I inspect the element with Chrome Dev Tools, I see:
当我使用 Chrome Dev Tools 检查元素时，我看到：
Dev tools does not provide information regarding the placeholder element when inspecting the input element. Is there another way?
在检查输入元素时，开发工具不提供有关占位符元素的信息。还有其他方法吗？
回答by Sean Anderson
I figured it out.
我想到了。
The trick is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools:
诀窍是在 Chrome 开发者工具的设置面板中启用“显示用户代理影子 DOM”：
To get to settings, click the "?" button at the top right of your Dev Tools panel, then click Settings, and it's under the default Preferences tab.
要进入设置，请单击“？” 点击开发工具面板右上角的按钮，然后点击设置，它位于默认的首选项选项卡下。
With that, you can now see it:
有了它，您现在可以看到它：
回答by Jay Supeda
- For Google Chrome Version 69:
- Open Inspect Elements: On Mac ? + Shift + C, on Windows / Linux Ctrl + Shift + C OR F12.
- Click the "?" button at the top right then Go to settings
- In settings click on Preferences > Click on Show user agent Shadow DOM
- 对于 Google Chrome 版本 69：
- 打开检查元素：在 Mac 上？+ Shift + C，在 Windows / Linux 上为 Ctrl + Shift + C 或 F12。
- 点击 ”？” 右上角的按钮，然后转到设置
- 在设置中点击 Preferences > 点击 Show user agent Shadow DOM
The below images show the process:
下面的图片展示了这个过程：
Go to settings > Preferences:
转到设置>首选项：
Click on Show user agent Shadow DOM:
单击显示用户代理 Shadow DOM：
View the CSS of placeholder:
查看占位符的CSS：
