Change the last letter of place holder texts using css

Question

I have a place holder for Username. Its placeholder text is "Enter you username *". Here i want to change the color of * (star). I google but all the solution is using javascript or jquery but i want to make it working with CSS.

Anyone know how to do this using css ?

Thanks, Aezaz

Answer 1

Yes this is possible, Check this Question, But it will have Browser Compatibility issues

Working Fiddle for Chrome

input::-webkit-input-placeholder:after /* Only for Chrome */
{
   color:red;
   content:"*";
   opacity: 1
}

Read this;

Style Placeholder Last Character with CSS

good luck!

Answer 2

You wont be able to style just the star part of the placeholder. check this page out to style the placeholder using CSS

Alternatively you can use a absolutely position label/div with a span around the * then style the span.

Answer 3

Code below is for placeholder

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

style only for *(star) is not..