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

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 s开发者_Go百科tyling 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?

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. :)

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...

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 />

No it's not possible with an <input type="text"> tag. You can however trick the user into believing he is using a styled input by replacing it with a contendeditable div or something.

However, I looked into this couple of years ago, and it's a mess if you want a reliable cross browser solution for this. Unless I remembered wrong the html from just showing a bold text in a contenteditable div could easily result in the following across the major browsers:

<BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
<span style="font-weight:bold">Bold</span> <!-- Chrome -->
<b>Bold</b> <!-- Firefox -->
<strong>Bold</strong> <!-- Safari -->
<lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->

No kiddin.