你遇到的问题很典型——<input>的value属性只能接受纯文本，没办法解析HTML标签，所以直接把<span>写进去只会显示成普通文字，达不到颜色区分的效果。下面给你两种实用的实现思路：

方法一：利用CSS渐变+::placeholder伪元素（推荐，纯CSS实现） #

如果可以改用原生的placeholder属性替代原来的focus/blur逻辑，我们可以通过背景渐变+文字裁剪的方式，让占位符的部分文本呈现不同颜色。

代码示例： #

<style>
.input {
  /* 基础样式 */
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
}

/* 定义渐变背景：前1个字符宽度为红色，剩余为黑色 */
.input::placeholder {
  background: linear-gradient(to right, red 1ch, black 1ch);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>

<input class="input" id="name" type="text" name="name" placeholder="* Your Name">

这里的1ch是CSS相对单位，代表当前字体下数字"0"的宽度，刚好匹配*的宽度，能精准控制颜色分界。

方法二：用模拟元素实现自定义占位符（兼容性更强） #

如果需要保留原来的focus/blur逻辑，或者对旧浏览器兼容性要求更高，可以用一个<span>元素模拟占位符，放在输入框的上层，通过CSS控制它的显示/隐藏：

代码示例： #

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

.input {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
}

.placeholder-text {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 点击时穿透到输入框 */
  color: black;
}

.placeholder-text .required {
  color: red;
}

/* 输入框有内容或聚焦时隐藏模拟占位符 */
.input:focus + .placeholder-text,
.input:not(:placeholder-shown) + .placeholder-text {
  display: none;
}
</style>

<div class="input-wrapper">
  <input class="input" id="name" type="text" name="name" placeholder=" ">
  <span class="placeholder-text"><span class="required">*</span> Your Name</span>
</div>

这种方法的优势是可以完全自定义占位符的样式，甚至添加更复杂的HTML结构，兼容性也更好。

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