How debug placeholder pseudo element in firefox?

Question

I have CSS code like this:

:-moz-placeholder,::-moz-placeholder {
    color:    #999;
    /*some additional font styling*/
}

I can click "Inspect element" and see all style information about element. But where I can see all CSS rules that has applied to element placeholder?

Answer 1

Placeholder is a pseudo-element, like ::before and ::after (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) sometimes refered as pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes)

These types of elements could not be seen in the Firefox Inspector, you needed at least Firebug or Chrome Dev Tools, but recently it's available in the Firefox Inspector, too. They are part of the "shadow dom" (extreme simple description: elements created by the browser inside of other elements).

You should be able to find the placeholder in the dom inspectors inside your input or textarea elements, e.g. select an input element, then choose "inspect element" from right click menu, then you should see something like that:

Firefox Inspector

Chrome Dev Tools

For Chrome you may need to enable "Show user agent shadow DOM" in the Dev Tools settings.

Answer 2

Just to give an updated answer for anyone still coming to this page, in FireFox v66, you can reveal pseudo-element styles simply by clicking on the expand icon in the styles panel when inspecting an element in the Developer Tools- see screenshot: