占位符中的不同颜色

Question

我有一个输入框，占位符类似于这样：

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

现在我希望将占位符中的“*”标记为红色。有没有办法做到这一点？

- Xelakz

---

不，占位符只是一个（伪）元素。不可分割的。 - Mr Lister

Answer 1

元素的placeholder属性的外观由浏览器管理，它不能被分成两个单独的元素来进行样式设置，这需要样式化星号，也不能轻松地进行样式设置。

如果您想要实现这一点，您可能需要使用某些东西来显式地覆盖该元素，并在其上叠加包含您的<span>Name</span><span style='color:red'>*</span>内容的<div>元素，类似于相关讨论中提到的情况：

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

- Rion Williams

---

这种替代的方式对我来说其实还不错。 - Xelakz