html - 占位符中的不同颜色

Question

<分区>

Answer 1

placeholder的外观<input>的属性(property)元素由浏览器管理，它不能被分成两个单独的元素，而星号需要这样的样式，也不能轻易地设计成这样。

如果你想完成这个，你可能需要使用一些东西来显式覆盖带有 <div> 的元素。包含你的 <span>Name</span><span style='color:red'>*</span>覆盖在您的 <input> 上的内容元素本身类似于 the scenario mentioned in this related discussion :

.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 2px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}
.placeholder {
  position: absolute;
  pointer-events: none;
  top: 2px;
  bottom: 2px;
  left: 6px;
  margin: auto;
  color: #ccc;
}
.placeholder span {
  color: red;
}

    <div class="input-placeholder">
        <input type="text" required>
        <div class="placeholder">
            Name<span>*</span>
        </div>
</div>