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.

Answer 2

The top-rated solution doesn't work anymore I found the solution from How to set color for last character in placeholder And here is the code:

input {
  padding: 1em;
}
::-webkit-input-placeholder {
  background: -webkit-linear-gradient(left, #AAA 0%, #AAA 70%,red 70%, red 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}