仅更改输入占位符*颜色

Question

我有多个输入字段,一些字段是required必需的字段提及*所以我只需要更改输入占位符*颜色,而不是更改整个占位符颜色检查下面的图像我真正需要的.

我尝试过以下代码来实现这一点,但它可以改变占位符的整个颜色

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

检查这个...您可以使用来实现您的要求，:before and :after并且对于输入标签，不支持:before and :after. 因此，您可以通过在输入中添加标签并:before and :after为标签提供 CSS 来完成此操作

input {
    width: 160px;
}

input[required] + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; /* the negative of the input width */
}


input[required] + label:after {
    content:'*';
    color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
    display: inline-block;
}

/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
    display: none;
}

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