I'm working with an
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
Consider the following starting point for the generated replacement markup:
<div class="input"> <span class="nonEdited before">foo</span> <span class="edited">fizz</span> <span class="nonEdited after">bar</span> </div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.