占位符中的不同颜色

Question

我有一个带有占位符的输入字段，类似这样

<input type="text" name="Name" placeholder="Name*">

现在我希望占位符中的“*”变为红色。有办法吗？

Answer 1

<input> 元素的 placeholder 属性的外观由浏览器管理，不能将其分成两个单独的元素，仅星号就需要这种样式，也不能可以很容易地设计成这样吗？

如果你想完成这个，你可能需要使用一些东西来显式地覆盖带有 <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>

占位符中的不同颜色

Different colors in placeholder

html

css

placeholder