使用开发人员工具检查webkit-input-placeholder
可以使用以下内容设置文本输入的占位符样式:
-webkit-input-placeholder {
color: red;
}
我正在网上看一个网站,我想使用与它们相同的占位符颜色.是否有可能弄清楚他们使用的是什么颜色？我想包含任何alpha值,所以我不能只使用图像编辑器对颜色进行采样.
当我使用Chrome Dev Tools检查元素时,我看到:
在检查输入元素时,开发工具不提供有关占位符元素的信息.还有另外一种方法吗？
Sea*_*son 417
我想到了.
诀窍是在Chrome开发者工具的"设置"面板中启用"显示用户代理影子DOM":
要进行设置,请单击"开发工具"面板右上角的"⋮"按钮,然后单击"设置",它位于默认的"首选项"选项卡下.
有了它,你现在可以看到它:
- 设置在62,它工作得很漂亮. (3认同)
- @swrobel 这个答案中提到的工作流程让你检查`::placeholder`。请参阅此 [相关答案](/sf/answers/3790871661/)。 (2认同)
- 它已移至 **Settings** > **Preferences** > **Elements** > [_] Show user agent shadow DOM (2认同)
Jay*_*eda 24
- 对于Google Chrome 69版：
- 打开检查元素：在Mac上？+ Shift + C，在Windows / Linux上为Ctrl + Shift + C或F12。
- 点击 ”？” 右上角的按钮，然后转到设置
- 在设置中，单击首选项>单击显示用户代理Shadow DOM。
下图显示了该过程：
转到设置>首选项：
单击显示用户代理Shadow DOM：
查看占位符的CSS：
- 谢谢！我在 Chrome 设置中查找，但找不到它。显然，它位于开发工具设置中。 (2认同)