Changing the style of a placeholder attribute is relatively easy when using the vendor-prefixed CSS. However, if your styles are being overridden it can be tricky to work out where this is happening, since placeholders and a lot of other pseudo-elements don't appear in dev tools.

Freehand circles ahoy! In Chrome, it's possible to view the placeholder pseudo-element, and so find out where any errant CSS is coming from, by enabling the shadow DOM in settings. Open the dev tools (by right-clicking or pressing F12), and open the settings by clicking on the cog icon in the top-right. Under 'Elements', enable the 'Show user agent shadow DOM' setting (this can have a different label based on the version of Chrome you're using), then close the settings panel.

Right-click on an input with a placeholder, and in the dev tools you should now be able to expand the input element to find an element called #shadow-root; in here will be the placeholder as an element, which will show all the CSS being applied as a normal element would.