Customize pseudo elements like placeholders

Last week, I encountered this challenge of customizing a placeholder text in DOM. Placeholders are HTML5 attributes that gets added to text/textarea elements and provide a tip about that input element.

Now, a fresher came up with the problem of customizing this placeholder font to a different color(Note: Placeholders are gray colored by default). So, we started with adding a css expression to change the placeholder's font color. Unfortunately, it didn't change anything only in chrome browser and it did work well in other browsers.

We tried inspecting the element but the browser dev tools won't allow you to debug pseudo elements (like placeholders, before, after) by default. First, let me explain how to enable inspecting pseudo elements using chrome dev tools.

Chrome, calls these pseudo elements as shadow DOM elements. Now to enable this, you need to follow the below steps,

• Open the dev tools
• Click on the Cog Wheel/settings icon
• Check the option Show Shadow Dom

The image below will shows the chrome dev toolbar with shadow DOM enabled.

Now coming back to the problem, though we inspected the placeholder text, we found that the style is not applied. We tried adding all combinations of webkit style css expressions but still it won't work. Then, we started browsing some stackoverflow and fiddle links but no luck.

After some 20 minutes of debugging with 3-4 senior developers banging their head, we started to remove unwanted elements from the page one by one and tested if the style gets applied. Nothing happened. Finally, I tried moving the style wrote as inline style to an external stylesheet and refreshed the page. BOOM! it worked.

Then, we realised that psedu elements properties cannot be changed by inline stylesheets and can be changed only by external stylesheets. I have no theoretical proof of this. But it worked!!.

- Special Thanks to Sanchit Mehta for bringing up this problem to me :) - Thanks Anto ji for correcting a major mistake in the post.