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:

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:

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Mar 14, 2019 at 9:58 Siddharth panchalSiddharth panchal 10122 silver badges1313 bronze badges 3

• 2 Have you tried this answer? : stackoverflow./questions/22415875/… Let me know ! – Marin Mouscadet Commented Mar 14, 2019 at 10:05
• 3 Possible duplicate of 2 colors in one placeholder of input field – AG_ Commented Mar 14, 2019 at 10:08
• 1 Possible duplicate of Add span inside form's placeholder – vrintle Commented Mar 14, 2019 at 10:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>

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;
}

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>