comment 0

Style Placeholder Last Character with CSS

Styling placeholder last character is bit challenging with CSS. We often come to a situation while validating forms where we usually add ‘*’ at the end of placeholder which is to be styled like color: red showing that this field is required before submitting the form.

Good news is; this is possible with CSS by combining CSS placeholder selector and pseudo selectors.
Bad news is; it’s not supported in older browsers. For modern browsers you need browser specific CSS properties. List of all these selectors is available here.

How to achieve?

It’s can be achieved by combining placeholder selectors and pseudo selectors. I have created fiddle example and tested. This worked great in chrome. Below is the magic formula to style placeholder last character;
Input + Placeholder Selector + Pseudo Selector = Placeholder Last Character Selector
input::-webkit-input-placeholder:after{/*CSS*/} = Placeholder Last Character Selector

CSS

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

HTML

<input type="text" placeholder="Email" type="email" />

Congrats another issue fixed today.