如何为HTML input元素placeholder占位符的不同部分设置不同颜色？

• 首先明确结论：原生<input>的placeholder属性无法实现你要的分色效果，浏览器提供的::placeholder伪元素仅支持对整个占位符文本设置统一样式，无法选中占位符内的部分字符单独指定颜色。你可以通过模拟占位符的方案实现需求，具体操作如下：

推荐实现方案：label元素模拟占位符 #

该方案不需要额外引入JS，仅靠HTML+CSS即可实现，兼容性覆盖绝大多数主流浏览器。

1. HTML结构代码 #

<div class="input-wrapper">
  <!-- 这里保留空占位符用来触发:placeholder-shown伪类 -->
  <input type="text" id="firstName" placeholder=" " required>
  <label for="firstName" class="mock-placeholder">
    <span class="placeholder-text">First Name</span>
    <span class="required-mark">*</span>
  </label>
</div>

2. CSS样式代码 #

/* 输入框容器设置相对定位，用来承载绝对定位的模拟占位符 */
.input-wrapper {
  position: relative;
  width: 240px;
}
.input-wrapper input {
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
}
/* 隐藏原生默认占位符 */
.input-wrapper input::placeholder {
  opacity: 0;
}
/* 模拟占位符基础样式 */
.mock-placeholder {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.2s ease;
}
/* 分别设置两部分文本的颜色 */
.mock-placeholder .placeholder-text {
  color: yellow;
}
.mock-placeholder .required-mark {
  color: red;
}
/* 输入框聚焦、或已输入内容时，隐藏模拟占位符 */
.input-wrapper input:focus ~ .mock-placeholder,
.input-wrapper input:not(:placeholder-shown) ~ .mock-placeholder {
  opacity: 0;
  /* 如果需要实现占位符上浮的动效，可以替换上面的opacity:0为以下代码：
  top: 0;
  font-size: 12px;
  opacity: 1;
  background: #ffffff;
  padding: 0 4px;
  */
}

内容的提问来源于stack exchange，提问作者Umair Ali