How to apply name with black colour & Star with red colour to into Placeholder Star as a Required filed?

Question

Into input placeholder, I'm trying to set placeholder-name with black color & Star with red color as a Required filed but didn't apply an only specific red color to Star, so is there any another way to set color Please suggest me best way?

Already tried to set using but didn't get proper resolution,

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

Demo Mentioned below:

Have you tried this answer? : https://stackoverflow.com/questions/22415875/add-span-inside-forms-placeholder Let me know ! — Marin Mouscadet, Mar 14 '19 at 10:05
Possible duplicate of [2 colors in one placeholder of input field](https://stackoverflow.com/questions/24069830/2-colors-in-one-placeholder-of-input-field) — AG_, Mar 14 '19 at 10:08
Possible duplicate of [Add span inside form's placeholder](https://stackoverflow.com/questions/22415875/add-span-inside-forms-placeholder) — vrintle, Mar 14 '19 at 10:14

score 4 · Accepted Answer · answered Mar 14 '19 at 10:49

It will work for you. I have just codded for single field.

.form-group{position:relative;}
.form-group input{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px}
.form-group label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;}
.form-group label::after{content:"*";color:red;}
input[required]:valid + label{display: none;}

<div class="form-group">
  <input type="text"  name="name" required="required" />
  <label>Enter first name</label>
</div>

score 0 · Answer 2 · answered Mar 14 '19 at 10:46

There is no perfect solution.

The first option is to use background images, but the star position must be set manually for every field:

input::placeholder {
  background-image: url('images/some-red-star.png') no-repeat;
  background-position-x: 50px;
}

If you can't afford to place manually every star you use a fake html placeholder by placing a div bellow every and making it behave as a placeholder:

<input required="required">
<div class="placeholder">name<span>*</span>

.placeholder { 
  position: ... 
  pointer-events: none;
  user-select: none;
}
.placeholder > span { color: red; }
input:valid ~ .placeholder {
  display: none;
}

score 0 · Answer 3 · answered Mar 14 '19 at 10:58

Try This I think it's useful for you

input {
 width: 200px;
 padding: 8px;
}

input[required] + label {
  position: relative;
  color: #000;
  font-size: 16px;
  left: -210px;
}

input[required] + label:after {
  content: '*';
  color: red;
}

.btn {
  width: auto;
  margin: 10px 0;
}

<form>
  <input type="text" id="box1" required="required" />
    <label for="name">Enter First Name</label><br/><br/>
  <input type="text" id="box1" required="required" />
    <label for="name">Enter Last Name</label><br/>
  <input class="btn" type="submit" />
</form>

the placeholder does not go away when I start typing in input — AG_, Mar 14 '19 at 11:09

How to apply name with black colour & Star with red colour to into Placeholder Star as a Required filed?

3 Answers3