Change color of Place holder last character

Question

I have a form with inputs having placeholders showing * for required field in addition to helper text.

What i want is to change the color of * i.e. last character of placeholder

<input type="text" placeholder="Name *" />

Is there any selectors for that? In addition to below selector, selecting a placeholder;

input::-webkit-input-placeholder (for webkit browsers)

thanks in advance!

Answer 1

A bit tricky, and you'll have to check yourself for the different browsers' support, but here is a Fiddle Demo for you :-)

html

<input type="text" placeholder="Name" />

css

input::-webkit-input-placeholder:after{color:red;content:" *";}

Just moved the * to be a part of the :after element, and styled it separately.