在dev工具中设置输入占位符CSS的样式

Question

我知道如何使用每个浏览器指定的伪类在浏览器中设置占位符文本/背景/字体大小等CSS的样式。但是我无法使用开发工具在浏览器中设置它们的样式，并且没有找到答案是否可能这样做。

我喜欢在不使用试错工作流程的情况下使用占位符样式。

Answer 1

可以在Chrome中使用。

转到开发工具设置（右上角的齿轮图标），然后在常规|元素下打开＆＃34;显示用户代理阴影DOM＆＃34;。

现在去检查你的文本框。现在输入元素旁边应该有一个箭头。

展开并选择<div psuedo="-webkit-input-placeholder" id="placeholder" style="visibility: visible; text-overflow: clip;">。

您用于修改占位符的类应显示在样式窗格中。

以下是它的样子：