如何将带有黑色名称和红色星形的名称应用到占位符星作为必填项？

Question

进入输入占位符，我试图设置占位符名称用黑色和星号用红色作为必填项但但没有应用特定的红色到星星，所以是否有任何其他方式设置颜色请建议我最好的办法？

已经尝试设置使用但没有得到适当的解决方案，

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

演示如下：

Answer 1

它会对你有用。我刚刚编写了单场字段。

.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>

Answer 2

没有完美的解决方案。

第一个选项是使用背景图像，但必须为每个字段手动设置星形位置：

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

如果你不能手动放置每个星星，你可以使用假的html占位符，每次放置一个div，并使其表现为占位符：

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

Answer 3

试试这个我认为它对你有用

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>