如何将黑色的名称和红色的星号应用到占位符星标中，作为必填字段？

Question

在输入占位符中，我正在尝试将黑色的占位符名称和红色的星形设置为必填字段，但未对Star仅应用特定的红色，因此还有其他设置颜色的方法请建议我最好的方法？

已经尝试设置使用，但没有获得正确的分辨率，

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

如果您无力手动放置每颗星星，则可以通过放置div波纹管并使其表现为占位符来使用假html占位符：

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