您的猜想是正确的：样式仅适用于整个输入。

由于样式只能应用于整个元素，因此解决方案将要求每种所需颜色至少包含一个元素。

考虑相对于用户进行更改的点的输入字段的划分。输入分为三部分：

• 在应用更改之前
• 在应用更改之后
• 在这一点上正在应用更改

您无法使用单个输入元素来实现此目的。并且随着更改的应用点可以更改，由三个元素包装的“输入”部分也将更改。解决方案需要JavaScript。

您最初应该包括常规输入元素，并放弃任何所需的颜色。使用JavaScript将输入替换为合适的容器元素。可以设置样式以模仿输入元素。

发生更改时，请使用JavaScript识别上述三个部分。根据需要将它们包装在适当的元素中（最好是跨度）和颜色。

对于生成的替换标记，请考虑以下起点：

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

使用click，keydown和keyup事件来找出输入的三个部分，并根据需要套用伪造的输入的三个部分。