Change color for one part of placeholder

Question

How can I change just one part of placeholder?

Here is my html:

<div class="col-md-4">
<p class="form-row form-row-wide">
<input type="email" class="input-text" name="email2" id="reg_email2" placeholder="Retype email: *" value="" />
</p>
</div>

I need just to change * to red...

There is currently no way of chaning parts of the placeholder, what you could do is add the * to a ':after' or ':before' element. — Persijn, Feb 28 '16 at 14:18
@Persijn * can be added in placeholder directly, with :after — The Process, Feb 28 '16 at 14:55

The Process · Accepted Answer · 2016-02-28T15:58:27.160

You can do it like this:

<input type="email" placeholder="Retype email:" id="email">


#email {
   width: 95%;
   border: 1px solid black;
   font-size: 1.15em;
}

#email::-webkit-input-placeholder:after {
   content:"*";
   color:red;
   font-size:1.15em;
}

#email::-moz-placeholder:after {
     content:"*";
     color:red;
     font-size:1.15em;
 }
 #email:-ms-input-placeholder:after {     
     content:"*";
     color:red;
     font-size:1.15em;
}

Check the snippet below:

#email {
  width: 95%;
  border: 1px solid black;
  font-size: 1.15em;
}
#email::-webkit-input-placeholder:after {
  content: "*";
  color: red;
  font-size: 1.15em;
}
#email::-moz-placeholder:after {
  content: "*";
  color: red;
  font-size: 1.15em;
}

<input type="email" placeholder="Retype email:" id="email">

I tried to run the code snipped and it is not working. I am using Chrome. Can you review it? — Kevy Granero, Oct 26 '21 at 01:59

Change color for one part of placeholder

1 Answers1

Linked

Related