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

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.

Answer 2

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

Answer 3

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 4

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