您的猜想是正确的：样式仅适用于整个输入。
由于样式只能应用于整个元素，因此解决方案将要求每种所需颜色至少包含一个元素。
考虑相对于用户进行更改的点的输入字段的划分。输入分为三部分：
- 在应用更改之前
- 在应用更改之后
- 在这一点上正在应用更改
您无法使用单个输入元素来实现此目的。并且随着更改的应用点可以更改，由三个元素包装的“输入”部分也将更改。解决方案需要Javascript。
您最初应该包括常规输入元素，并放弃任何所需的颜色。使用Javascript将输入替换为合适的容器元素。可以设置样式以模仿输入元素。
发生更改时，请使用Javascript识别上述三个部分。根据需要将它们包装在适当的元素中（最好是跨度）和颜色。
对于生成的替换标记，请考虑以下起点：
<div > <span >foo</span> <span >fizz</span> <span >bar</span></div>
使用click，keydown和keyup事件来找出输入的三个部分，并根据需要套用伪造的输入的三个部分。
