Styling letters of a word within an input differently, possible?

Question

Wondering if this is even possible, but if I have a input containing text, for example lets say the word 'Test' is in the input. What I would like to be able to do is change the styling on the individual letters of the word 'Test'

I would like the 'Te' to be bold and then have the 'st' be regular.

It wouldn't have to be bold, maybe I would like the 'e' to be red or something like that.

Any ideas on how this might be accomplished?

Answer 1

Don't think it is possible (will do some more test).

What about adding a contenteditable div which looks like a input?

Simple contenteditable exmaple: http://jsfiddle.net/PpEx7/

EDIT

Nopez not possible. :)

Answer 2

You should take a look at how HTML WYSIWYG editors are build.

Basically, they

• hide the input field and display another html element with the styled content: Highlight text as you type on textarea

or

• use design mode in html: javascript Rich Text Editors

both ways are not trivial...

Answer 3

If you take a look at the MDN CSS Reference you can see for yourself that there is no selector for single letters inside a field.

The best you can do is use :first-letter

But As you can see it does not work on <input />