html - 仅更改输入占位符 * 颜色

Question

我有多个输入字段，有些字段是必填 并且必填字段用* 提及，所以我只需要更改输入占位符* 颜色， 不改变整个占位符的颜色检查下图我到底需要什么。

我试过下面的代码来实现这个，但它可以改变占位符的整体颜色

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

只是placeholder不会给出不同的样式。如果你想要不同的样式，你需要像这样分开。

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>