Change input placeholder * color only

Question

I have multiple input fields some fields are required and required field mention with * so I need to change input placeholder * color only, not change whole placeholder color check below image what I exactly need.

I have tried below code to achieve this but it can change whole color of placeholder

div {
  margin:10px 0px;
}
input {
  width: 200px;
  border: none;
  border-bottom: solid 1px #8d97a0;
  padding: 5px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
::-webkit-input-placeholder {
  color:red;
}

<div>
  <input type="name" name="name" id="name" placeholder="Name *">
</div>
<div>
  <input type="Email" name="email" id="email" placeholder="Email">
</div>
<div>
  <input type="phone" name="phone" id="phone" placeholder="Phone">
</div>
<div>
  <input type="password" name="password" id="password" placeholder="Password *">
</div>

Answer 1

Try this:

label {
  display: inline-block;
  width:100%;
  background: linear-gradient(to right, #999 6em, red 5em);
  border: 2px solid #ccc;
  font-family: monospace;/* less surprise about length of text at screen */
}
input {
  font-weight: bold;
  width: 100%;
  height:20px;
  padding:10px;
  border: none;
  display: block;
outline:none;

}
input:invalid {/* color part of text only when placeholder is shown */
  mix-blend-mode: screen;
}

<label>
  <input placeholder="Password *" required />
</label>

Answer 2

Just placeholder wont give different styles.If you want different style you need to separate like this.

input {
    width: auto;
}

input + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; 
}

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


input[required]:invalid + label {
    display: inline-block;
}

input[required]:valid + label{
    display: none;
}

<div>
  <input type="text" id="name" name="name" required="required" />
  <label for="name">Password</label>
</div>