如何为输入框占位符的星号设置不同颜色？现有方案不适配现代浏览器

确实，现代浏览器对原生placeholder的样式控制越来越严格了，之前那些试图直接给占位符内部分文本单独改色的方法基本都失效了。不过别担心，有两个靠谱的现代方案能完美实现你要的需求：

方案一：用Label模拟占位符（推荐） #

这个方法兼容性极佳，所有现代浏览器都支持，而且样式自定义自由度极高，我自己在项目里也经常用：

HTML 结构 #

<div class="input-group">
  <input type="text" id="nameInput" />
  <label for="nameInput">Name: <span class="required-mark">*</span></label>
</div>

CSS 样式 #

.input-group {
  position: relative;
  /* 可以根据你的设计调整容器样式 */
}

#nameInput {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 280px;
  /* 确保输入框背景不透明，能覆盖住下方的label */
  background-color: #fff;
}

.input-group label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #999; /* 占位符普通文本的颜色 */
  pointer-events: none; /* 点击label直接触发input聚焦 */
  transition: opacity 0.2s ease;
}

.required-mark {
  color: #e53935; /* 星号的高亮颜色，换成你想要的即可 */
}

/* 当input获得焦点或已有内容时，隐藏模拟的占位符 */
#nameInput:focus + label,
#nameInput:not(:placeholder-shown) + label {
  opacity: 0;
}

为啥这个方案靠谱？ #

• 利用CSS相邻兄弟选择器精准控制label的显示状态，逻辑清晰；
• pointer-events: none避免了点击label时的交互冲突；
• 过渡动画让体验更流畅，完全符合现代UI的交互要求。

方案二：用容器伪元素实现（无额外标签） #

如果你不想多写一个label标签，也可以用输入框容器的伪元素来模拟，但需要注意位置校准：

HTML 结构 #

<div class="input-wrapper">
  <input type="text" placeholder=" " />
</div>

CSS 样式 #

.input-wrapper {
  position: relative;
  display: inline-block;
}

.input-wrapper input {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 280px;
}

/* 模拟"Name: "文本 */
.input-wrapper::before {
  content: "Name: ";
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

/* 模拟彩色星号 */
.input-wrapper::after {
  content: "*";
  position: absolute;
  top: 50%;
  left: 70px; /* 这里要根据"Name: "的长度调整，确保位置准确 */
  transform: translateY(-50%);
  color: #e53935;
  pointer-events: none;
}

/* 聚焦或有内容时隐藏伪元素 */
.input-wrapper input:focus::placeholder,
.input-wrapper input:not(:placeholder-shown)::placeholder {
  color: transparent;
}

.input-wrapper input:focus ~ .input-wrapper::before,
.input-wrapper input:not(:placeholder-shown) ~ .input-wrapper::before,
.input-wrapper input:focus ~ .input-wrapper::after,
.input-wrapper input:not(:placeholder-shown) ~ .input-wrapper::after {
  opacity: 0;
}

注意点 #

• 这个方法需要精确计算伪元素的位置，不同字体、字号下可能要调整left值；
• 输入框的placeholder必须设为一个空格，这样not(:placeholder-shown)才能正常触发。

总的来说，方案一的可维护性和兼容性都更优，更适合大多数场景。

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