Question

我有一个带有占位符的输入字段，如下所示

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

现在我想要＆＃34; *＆＃34;在占位符上着色为RED。有没有办法做到这一点？

Answer 1

placeholder元素的<input>属性的外观由浏览器管理，它不能分成两个单独的元素，它们只需要样式化星号，也不能轻易地将其设置为这样

如果您想完成此操作，则可能需要使用某些内容明确覆盖包含<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>

占位符中的不同颜色

1 个答案: